vue第七课：记事本实例

功能需求：

1. 新增
   • 生成列表结构
   • 获取用户输入
   • 回车，新增数据  
2. 删除
   • 点击删除指定内容(v-on splice)  
   • splice(index,1)  删除1个对应的索引
3. 统计
   • v-text,length  
4. 清空
   • 数组清空  
5. 隐藏
   • 没有数据时，隐藏元素（v-if,v-show 数组非空）  

<div id='app'>
 <input  type="text"  v-model="inputext" placeholder="请输入文字" @keyup.enter="add">
 <ul>
  <li v-for="(item,index) in list">
    {{index+1}}-{{item}}
    <input type="button" @click="remove(index)" value="删除">
  </li>
 </ul>
 <div v-if="list.length!=0">
  <span>{{list.length}}条日记</span>
  <button type="button" @click="clear">清空所有</button>
 </div>
  </div>
  <script>
    Vue.config.productionTip = false //阻止vue在启动时生成生产提示。
    var app = new Vue({
      el: '#app',
      data: {
      list:[],
      inputext:'',
       
      },
    methods: {
      add:function(index){
        this.list.push(this.inputext);
      },
      remove:function(index){
        this.list.splice(index,1);
      },
      clear:function(){
        this.list=[];
      },
    },
    })
  </script>