前端學習五（vue高階特性）
阿新 • • 發佈：2021-11-06
一、事件的引數傳遞
<body> <table id="app" border=""> <tr> <th>id</th> <th>name</th> <th>tester</th> <th>project</th> <th>操作</th> </tr> <tr一個只會點點點的測試，有疑問可以在測試群（群號：330405140）問我v-for="item in lists"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.tester}}</td> <td>{{item.project}}</td> <td><button @click="del(item.id)">刪除</button></td> </tr> </table> <script> var vm = new Vue({ el: "#app", data: { lists: [{ "id": 1, "name": "登入介面1", "tester": "測試人1", "project": "自動化測試平臺1" }, {"id": 2, "name": "登入介面2", "tester": "測試人2", "project": "自動化測試平臺2" }, { "id": 3, "name": "登入介面3", "tester": "測試人3", "project": "自動化測試平臺3" }] }, methods: { del: function (id) { console.log("點選了刪除按鈕", id); // 方法一，filter // this.lists = this.lists.filter( // function (item) { // return item.id != id // } // ) // 方法二，找到索引，再刪資料 const ind = this.lists.findIndex(function (item) { return item.id === id }) console.log("索引", ind); // 第一個入參為索引，第二入參為從入參索引開始刪除的個數 this.lists.splice(ind, 1) } } }) </script> </body>