原理:
//根据id得到下标
// 默认去遍历list集合,将集合中的每个元素传入到function的item里, var index =
this.list.findIndex(function(item){ //根据item中的id属性来判断这个item是否是上面id中
//对应的数据,如果是返回一个true ,否返回false,继续下面的一条数据的遍历,以此类推 return item.id ==id;
//如果返回true,那么findIndex方法会将这个item对应的id返回到外面接受
});
实例:
<body>
<div id="app">
<div class="add">
编号: <input type="text" v-model="id">品牌名称: <input v-model="name" type="text">
<button @click="add">添加</button>
</div>
<div class="add">品牌名称:<input type="text"></div>
<div>
<table class="tb">
<tr>
<th>编号</th>
<th>品牌名称</th>
<th>创立时间</th>
<th>操作</th>
</tr>
<tr v-if="list.length <= 0">
<td colspan="4">没有品牌数据</td>
</tr>
<!--加入: key="index" 时候必须把所有参数写完整 -->
<tr v-for="(item,key,index) in list" :key="index">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime}}</td>
<!-- 使用vue来注册事件时,我们在dom元素中是看不到的 -->
<td><a href="javascript:void(0)" @click="del(item.id)">删除</a></td>
</tr>
</table>
</div>
</div>
</body>
</html>
<script src="vue2.4.4.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
id: 0,
name: '',
list: [
{ "id": 1, "name": "it", "ctime": Date() },
{ "id": 2, "name": "白龙", "ctime": Date() }
]
},
methods: {
add: function () {
//将id和namepush到list数组中
this.list.push({ "id": this.id, "name": this.name, "ctime": Date() });
},
del:function(id) {
// 根据id得到下标
// 默认去遍历list集合,将集合中的每个元素传入到function的item里,
var index = this.list.findIndex(function(item){
//根据item中的id属性来判断这个item是否是上面id中
//对应的数据,如果是返回一个true ,否返回false,继续下面的一条数据的遍历,以此类推
return item.id ==id; //如果返回true,那么findIndex方法会将这个item对应的id返回到外面接受
});
// 根据下标在list集合中将对应的数据删除
// splice(开始删除的下标,删除的长度)
this.list.splice(index,1);
}
}
});
</script>