前端学习五（vue高级特性）
作者：互联网
一、事件的参数传递
<body>
<table id="app" border="">
<tr>
<th>id</th>
<th>name</th>
<th>tester</th>
<th>project</th>
<th>操作</th>
</tr>
<tr 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>
标签：vue,name,tester,前端,特性,project,item,lists,id 来源： https://www.cnblogs.com/yinwenbin/p/15516619.html