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>
简单效果
