> 效果如圖  >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)