1. 程式人生 > >做一個vue的todolist列表

做一個vue的todolist列表

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列表