做一個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>

涉及知識點：

記錄：js刪除數組中某一項或幾項的幾種方法
1:js中的splice方法

　　splice(index,len,[item])    注釋：該方法會改變原始數組。

splice有3個參數，它也可以用來替換/刪除/添加數組內某一個或者幾個值

index:數組開始下標        len: 替換/刪除的長度       item:替換的值，刪除操作的話 item為空

如：arr = ['a','b','c','d']

刪除 ----  item不設置

arr.splice(1,1)   //['a','c','d']         刪除起始下標為1，長度為1的一個值，len設置的1，如果為0，則數組不變

arr.splice(1,2)  //['a','d']          刪除起始下標為1，長度為2的一個值，len設置的2

替換 ---- item為替換的值

arr.splice(1,1,'ttt')        //['a','ttt','c','d']         替換起始下標為1，長度為1的一個值為‘ttt’，len設置的1

arr.splice(1,2,'ttt')        //['a','ttt','d']         替換起始下標為1，長度為2的兩個值為‘ttt’，len設置的1

 

添加 ----  len設置為0，item為添加的值

arr.splice(1,0,'ttt')        //['a','ttt','b','c','d']         表示在下標為1處添加一項‘ttt’

看來還是splice最方便啦

2：delete       delete刪除掉數組中的元素后，會把該下標出的值置為undefined,數組的長度不會變

如：delete arr[1]  //['a', ,'c','d']     中間出現兩個逗號，數組長度不變，有一項為undefined
如何使用 pop() 來刪除并返回數組的最后一個元素。
36  

?

?

?