做一个vue的todolist列表

<template><div id="app"><input type="text"  v-model="todo" ref="ip"/><button @click="add()">+新增</button><br/><br/><hr/><ul><li v-for="(item,key) in list">{{key}} {{item}}   ----- <button v-on:click="remove(key)">删除</button></li></ul></div>
</template><script>
export default {name: 'app',data () {return {todo:"",list:[]}    },methods:{add(){var val=this.$refs.ip.value;   或者用this.todo，这两种都可以：this.todo是从model获取input种的值，因为model和view是双向关联。this.$refs.ip.value;则是直接获取view的input的dom节点然后获取text

this.list.push(val);this.todo="";},remove(key){this.list.splice(key,1);}
}
}
</script><style></style>

涉及知识点：

 1 记录：js删除数组中某一项或几项的几种方法
 2 1:js中的splice方法
 3 
 4 　　splice(index,len,[item])    注释：该方法会改变原始数组。
 5 
 6 splice有3个参数，它也可以用来替换/删除/添加数组内某一个或者几个值
 7 
 8 index:数组开始下标        len: 替换/删除的长度       item:替换的值，删除操作的话 item为空
 9 
10 如：arr = ['a','b','c','d']
11 
12 删除 ----  item不设置
13 
14 arr.splice(1,1)   //['a','c','d']         删除起始下标为1，长度为1的一个值，len设置的1，如果为0，则数组不变
15 
16 arr.splice(1,2)  //['a','d']          删除起始下标为1，长度为2的一个值，len设置的2
17 
18 替换 ---- item为替换的值
19 
20 arr.splice(1,1,'ttt')        //['a','ttt','c','d']         替换起始下标为1，长度为1的一个值为‘ttt’，len设置的1
21 
22 arr.splice(1,2,'ttt')        //['a','ttt','d']         替换起始下标为1，长度为2的两个值为‘ttt’，len设置的1
23 
24  
25 
26 添加 ----  len设置为0，item为添加的值
27 
28 arr.splice(1,0,'ttt')        //['a','ttt','b','c','d']         表示在下标为1处添加一项‘ttt’
29 
30 看来还是splice最方便啦
31 
32 2：delete       delete删除掉数组中的元素后，会把该下标出的值置为undefined,数组的长度不会变
33 
34 如：delete arr[1]  //['a', ,'c','d']     中间出现两个逗号，数组长度不变，有一项为undefined
35 如何使用 pop() 来删除并返回数组的最后一个元素。
36