> 效果如图  >html代码 ``` <!-- v-cloak 配合属性选择器display:none，加载完毕自动移除 --> <div id="app" v-cloak> <form action="#"> <input type="text" v-model="pid"> <input type="text" v-model="pname"> <input type="button" value="添加" id="add" v-on:click="add"> </form> <table> <thead> <tr> <th>编号</th> <th>名称</th> <th>创建时间</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td colspan="4" v-if="list.length == 0">数据为空</td> </tr> <tr v-for="item in list"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.ctime}}</td> <td><a href="javascript:void(0)" v-on:click="del(item)">删除</a></td> </tr> </tbody> </table> </div> ``` >vue.js代码 ``` new Vue({ el: "#app", data: { list: [ {id:1, name:"奔驰", ctime:new Date} // {id:2, name:"宝马", ctime:new Date} ], pid:"", pname:"" }, methods: { add: function(){ // console.log(this.pid); var p = {id:this.pid, name:this.pname, ctime:new Date}; this.list.push(p); /* 清空页面上文本框的数据 */ this.pid = ""; this.pname = ""; }, del: function(item){ /* 删除提示，如果if(true)则会执行return */ if(!confirm("确定要删除吗")){ return; } var index = this.list.indexOf(item); //获取此时的index值 console.log(index); this.list.splice(index, 1); } } }) ``` > js要点 根据id删除数据 1. 如何根据id, 找到要删除这一项的索引 2. 如果找到索引了，直接调用数组的splice方法 ``` /* 方法一some方法找到该项索引 */ this.list.some((item, i)=>{ if(item.id == id){ this.list.splice(i, 1); //在数组的some方法中，如果return true, 就会立即终止这个数组的后续循环 return true; } }) ``` ``` /* 方法二 通过findIndex(item)找到索引 */ var index = this.list.findIndex(item=>{ if(item.id == id){ return true; } }) ``` ---- 整个项目以上传至[github](https://github.com/MrXuxu/H5_demo/tree/master/Vue%E9%A1%B9%E7%9B%AE)