vue案例表格的增删改查

vue的增删改查功能，

1 使用命令创建一个vue项目  vue init webpack test2

2 创建过程不再演示

3 接下来就是数据的增删改查功能大致如图所示

因为增加，和删除比较简单我们先演示增加和删除

4 这是我的代码 这里是比较基础的代码  ，script里面模拟的数据

5 接下来演示删除

首先需要在删除按钮上添加一个事件    {{book.del}}  这里已经有了，接下来在methods里面添加事件 

del(index){this.books.splice(index,1)}  这里用的是删除方法

6  接下来是添加   在添加按钮上添加事件，然后在methods里面添加add事件

add(){this.books.push(this.newList)}   因为v-mode使用的是数据双向绑定，所以这里添加功能没问题，但是数据可能会有问题，建议是使用深拷贝代码可以换成下面的

add(){this.books.push(JSON.parse(JSON.stringify(this.newList)))}   到这里添加就完成了

7 紧接着是查询，查询的话需要再数据加载完成之后保存一下原始数据，便于后面做查询我是在数据挂载后拷贝了一份数据，同样是深拷贝将原始数据赋值给booksNew

mounted (){
this.booksNew = JSON.parse(JSON.stringify(this.books))
}

然后在查询按钮上新增一个事件  在methods添加searchBook事件

searchBook(){
let arr = []//声明一个新的数组用来接收查询数据
if(this.name == '') this.books = this.booksNew //如果查询名称为空，就显示所有的数据
//然后循环判断
for(let i=0;i if(this.books[i].name.indexOf(this.name) != -1){
arr.push(this.books[i])//判断如果查询到就追加到arr中
}
}
this.books = arr
}

此时查询功能就完成了