做一個vue的todolist列表
阿新 • • 發佈:2019-04-23
click v-on src 如何 info todo 不變 ref -c
<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
做一個vue的todolist列表