<!-- 根组件 -->

 <!-- 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>