开发者学堂课程【Vue.js 入门与实战：品牌案例-根据Id完成品牌的删除】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/586/detail/8143
品牌案例-根据Id完成品牌的删除
内容简介：
一、 按钮点击事件的实现
二、 some方法删除数据
三、 findIndex方法删除数据
一、按钮点击事件的实现
通常删除根据id来删除，步骤如下：找到删除按钮,使用@click. ="del实现按钮的点击事件使用.prevent（事件修饰符）阻止其默认行为。在del中添加item.id，实现根据id删除数据的点击事件。
<a href="@click.prevent ="del(item.id)"">删除
二、some方法删除数据
定义 del(id) 方法来根据id删除数据。首先我们需要知道如何根据 Id,找到要删除这一项的索引和如果找到了索引，直接调用数组的 splice 方法。
可以使用 some 实现,在数组的 some 方法中，如果 return true 就会立即终止这个数组的后续循环。
this.list.some((item, i)=>{
if(item.id==id){
this.list.splice(i,1)
return true;
}
})
三、 findIndex 方法删除数据
使用 this.list.findIndex 来查找索引，需要传一个回调函数，使用 if 语句来判断代码能否执行。
var index=this.list.findIndex(item=>){
if (item.id == id) {
return true;
}
})
this.list.splice(index, 1)
使用 findIndex 方法能快速找到索引,不用进行其他操作；但是作用单一，专门用来查找索引。
完整代码，如下：
<!DOCTYPE html>
<html lang= "en">
<head>
<meta charset= "UTF-8">
<meta name="viewport" content="width=device-width,initial
scale=1.0">
< meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
<link rel= "stylesheet" href= "./lib/bootstrap-3.3.7.css">
</head>
<body>
<div id= "app">
<div class= "panel panel-primary">
<div class= "panel-heading">
<h3 class= "panel-title">添加品牌</h3>
</div>
<div class= "panel-body form-inline " >
<lable>
Id:
<input type= "text" class="form-control" v-model= "id">
</lable>
<lable>
Name:
<input type= "text" class="form-control" v-model= "name">
</lable>
<input type="button" value="添加" class="btn btn-primary" @click= "add()">
</div>
</div>
<table class= "table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Ctime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr v-for="item in list" : key="item.id">
<td>{{ item.id }}</td>
<td>{{ v-text=" item.name " }}</td>
<td>{{ item.ctime }}</td>
<td>
<a href="@click.prevent ="del(item.id)"">删除</a>
</td>
</tr>
</table>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
id: ' ',
name: ' ',
list: [
{ id: 1, name: '奔驰', ctime: new Date() },
{ id: 2, name: '宝马', ctime: new Date() }]},
methods: {
add(){
var car ={id: this.id, name:this.name, ctime:new Date()}
del(id){
var index=this.list.findIndex(item=>){
if (item.id == id) {
return true;
}
})
this.list.splice(index, }
});
</script>
</body>
</html>
