filter()函数语法
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]
在vue实例中使用es6新语法和filter()函数将除了click的id项之外的其他item项数组加载,利用v-on事件绑定指令,v-for列表渲染指令,从而实现删除的功能。
<!-- 表格区域 -->
<div id="apptable">
<table class="table table-hover table-striped table-bordered border-secondary">
<thead>
<td>#</td>
<td>品牌名称</td>
<td>状态</td>
<td>创建时间</td>
<td>操作</td>
</thead>
<tbody>
<tr v-for="(item,index) in list" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault" v-model="item.status">
<label class="form-check-label" for="flexSwitchCheckDefault" v-if="item.status">已启用</label>
<label class="form-check-label" for="flexSwitchCheckDefault" v-else="'item.status">已禁用</label>
</div>
</td>
<td>{{item.time}}</td>
<td>
<a href="javascript:;" @click="remove(item.id)">删除</a> </td>
</tr>
</tbody>
</table>
</div>
<div id="app">
<!-- 表格区域 -->
<div id="apptable">
<table class="table table-hover table-striped table-bordered border-secondary">
<thead>
<td>#</td>
<td>品牌名称</td>
<td>状态</td>
<td>创建时间</td>
<td>操作</td>
</thead>
<tbody>
<tr v-for="(item,index) in list" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault" v-model="item.status">
<label class="form-check-label" for="flexSwitchCheckDefault" v-if="item.status">已启用</label>
<label class="form-check-label" for="flexSwitchCheckDefault" v-else="'item.status">已禁用</label>
</div>
</td>
<td>{{item.time}}</td>
<td>
<a href="javascript:;" @click="remove(item.id)">删除</a> </td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="./lib/vue.js"></script>
<script>
// 创建vue实例
const vm = new Vue({
el: "#app",
data: {
// 品牌列表
list: [{
id: 1,
name: '宝马',
status: true,
time: new Date()
}, {
id: 2,
name: '奥迪',
status: true,
time: new Date()
}, {
id: 3,
name: '奔驰',
status: true,
time: new Date()
}, {
id: 4,
name: '宝马',
status: true,
time: new Date()
}, ]
},
methods: {
remove(id) {
// console.log('删除成功');
// filter()是es6里面的新的用法,用来遍历新的数组
this.list = this.list.filter(item => item.id !== id)
}
}
})
this.list = this.list.filter(item => item.id !== id)是精髓,将数组中只有和参数id不一样的item项v-for列表循环出来。进而实现了删除功能