vue之简单的todoList（一）

 <!-- 根组件 -->
 <!-- vue的模板内，所有内容要被一个根节点包含起来 -->
 <template>
   <div id="app">
     <input type="text" v-model="todo">
     <button @click="addData()">+增加</button>
     <div v-for="(item,key) in list"> {{item}} -- <button @click="deleteData(key)">删除</button></div>
   </div>
 </template>
 <script>
 export default {
   name: 'app',

   data () {         // data是业务逻辑里面定义的数据
     return {
       todo:'',
       list:[],

      }
   },
   methods:{
    addData(){
       this.list.push(this.todo);
       this.todo='';
    },
    deleteData(key){
       this.list.splice(key,1);
       // array.splice(index,howmany,item1,.....,itemX)
       // index 必需。规定从何处添加/删除元素。
       // howmany必需。规定应该删除多少元素.必须是数字,但可以是 "0"。
    }

   }
 }
 </script>