HTML頁面
開始看視頻學習1.0，網上查刪除傳值都是delTo($index),用vue.min.js時，一直報錯未定義，在js data定義后，所刪除行錯誤，查了一下資料，沒找到為什么，
然后自己研究了一下，沒按套路進行，結果好使了
添加是點擊enter，進行添加展示到列表中，刪除通過循環得到的key，傳值到js中，進行id刪除
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <div id="test"> 9 <input type="text" v-model="content" @keyup.enter="addTo"> 10 <ul> 11 <li v-for="(item,key) in tos"> 12 <span>{{item.text}}</span> 13 <button v-on:click="delTo(key)">delete tos</button> 14 </li> 15 </ul> 16 </div> 17 18 </body> 19 </html>
vue.js
1 <script src="../vue.min.js"></script> 2 <script> 3 new Vue({ 4 el: '#test', 5 data: { 6 index:'', 7 content: '', 8 tos:[ 9 {text:'this is a dog'} 10 ] 11 }, 12 methods: { 13 addTo: function() {
//獲取值 14 var text = this.content 16 if (text) {
//插入數組對象中 17 this.tos.push({text:text})
//清空文本框 18 this.content='' 19 } 20 }, 21 delTo: function(index) { 23 this.tos.splice(index,1) 24 } 25 } 26 }) 27 </script>
簡單效果
