1 <!-- 根组件 -->
2 <!-- vue的模板内，所有内容要被一个根节点包含起来 -->
3 <template>
4 <div id="app">
5 <input type="text" v-model="todo">
6 <button @click="addData()">+增加</button>
7 <div v-for="(item,key) in list"> {{item}} -- <button @click="deleteData(key)">删除</button></div>
8 </div>
9 </template>
10 <script>
11 export default {
12 name: 'app',
13
14 data () { // data是业务逻辑里面定义的数据
15 return {
16 todo:'',
17 list:[],
18
19 }
20 },
21 methods:{
22 addData(){
23 this.list.push(this.todo);
24 this.todo='';
25 },
26 deleteData(key){
27 this.list.splice(key,1);
28 // array.splice(index,howmany,item1,.....,itemX)
29 // index 必需。规定从何处添加/删除元素。
30 // howmany必需。规定应该删除多少元素.必须是数字,但可以是 "0"。
31 }
32
33 }
34 }
35 </script>
