又到了大家最喜欢的项目练习阶段，学以致用，今天我们要用前几篇的学习内容实现列表的添加与删除。
学前准备：
①：JavaScript中的splice(index,i)方法：从已知数组的index下标开始，删除i个元素。
②：JavaScript中的findIndex() 方法：为数组中的每个元素都调用一次函数执行。
③：箭头函数（=>）是在ECMAScript6 中添加的一种规范，相当于匿名函数， 简化了函数的定义。如：x => x * x 相当于 function(x){ return x*x }
1、先来看看商品添加功能
<!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>删除添加</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
<div id="app">
<div class="panel panel-primary" style="margin-bottom: 0px">
<div class="panel-heading">
<h3 class="panel-title">车型列表项目</h3>
</div>
<div class="panel-body form-inline" style="text-align:center">
序号：<input type="text" class="form-control" v-model="id"/>
车型：<input type="text" class="form-control" v-model="name"/>
<input type="button" class="btn btn-primary" value="添加" @click="add()"/>
</div>
</div>
<table class="table table-bordered table-hover" style="text-align: center">
<header>
<tr>
<td>序号</td>
<td>车型</td>
<td>添加时间</td>
<td>操作</td>
</tr>
</header>
<tbody>
<tr v-for="item in list" :key="item.id">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.time }}</td>
<td><a href="">删除</a></td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
var vm = new Vue({
el : "#app",
data:{
id:‘‘,
name:‘‘,
list:[
{id:1,name:‘奥迪‘,time:new Date()},
{id:2,name:‘宝马‘,time:new Date()},
{id:3,name:‘奔驰‘,time:new Date()},
{id:4,name:‘保时捷‘,time:new Date()}
]
},
methods:{
add(){
var car = {
id:this.id,
name:this.name,
time:new Date()
};
this.list.push(car);
this.id = this.name = ‘‘;
}
}
})
</script>
</body>
</html>
这里我们定义了一个list集合，并通过在input框中输入内容，然后把新的车型添加到list集合中并显示在页面上（这在上一篇v-for指令中已经举例说明过了）。为了让样式更加美观，这里我们引入使用了Bootstrap的CSS样式文件。
2、删除功能页面实现：
<td><a href="" @click.prevent="del(item.id)">删除</a></td>
js代码实现：
del(id){ var index = this.list.findIndex( item => { if(id == item.id){ return true; } }); this.list.splice(index,1); }
点击删除按钮之后 ，会把当前元素的id作为参数，以此来找到该元素并删除该元素。“删除”操作的元素为一个a链接，为了防止页面的跳转，这里加了事件修饰符“.prevent”来阻止页面的跳转。删除函数里用了findIndex和splice两个函数，其作用功能在开篇已经介绍了。这个项目主要是为了整合之前用到的知识，达到巩固的目的，实际工作中的借鉴作用还是蛮大的，算是入门级别的吧。
每天进步一点点！
原文：https://www.cnblogs.com/shibin90/p/10348645.html