vue案例表格的增删改查
vue的增删改查功能，
1 使用命令创建一个vue项目 vue init webpack test2
2 创建过程不再演示
3 接下来就是数据的增删改查功能大致如图所示
因为增加，和删除比较简单我们先演示增加和删除
4 这是我的代码 这里是比较基础的代码 ，script里面模拟的数据
<template>
<div class="hello">
<div>
书名：<input type="text" v-model="newList.name">
编号：<input type="text" v-model="newList.id">
日期：<input type="text" v-model="newList.d">
<input type="button" value="添加">
</div>
请输入查找关键字：<input type="text" v-model="name">
<input type="button" value="查询" >
<table>
<tr>
<td>名称</td>
<td>编号</td>
<td>日期</td>
<td>操作</td>
</tr>
<tr v-for="(book,index) in books" :key="index">
<td>{{book.name}}</td>
<td>{{book.id}}</td>
<td>{{book.d}}</td>
<td>
<a v-on:click="update(index)">修改</a>
<a v-on:click="del(index)"> {{book.del}}</a>
</td>
</tr>
</table>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
mounted (){
},
data(){
return {
books:[
{name:"西游记",d:new Date(),del:'删除'},
{name:"三国演义",d:new Date(),del:'删除'},
{name:"或楼梦",d:new Date(),del:'删除'},
{name:"水浒传",d:new Date(),del:'删除'},
],
newList:{
name:'',
id:'',
d:'',
del:"删除"
},
name:'',
booksNew:[],
flag:false,
itemIndex:0,
bookList:{}
},
methods:{
}
}
</script>
<style scoped>
table{
width: 80%;
margin: 0 auto;
border-collapse: collapse;
}
table,td,tr{
border: 1px solid #333333;
}
a {
color: #42b983;
}
</style>
5 接下来演示删除
首先需要在删除按钮上添加一个事件 <a v-on:click="del(index)"> {{book.del}}</a> 这里已经有了，接下来在methods里面添加事件
del(index){this.books.splice(index,1)} 这里用的是删除方法
6 接下来是添加 在添加按钮上添加事件<input type="button" value="添加" @click="add">，然后在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))
}
然后在查询按钮上新增一个事件<input type="button" value="查询" @click="searchBook"> 在methods添加searchBook事件
searchBook(){
let arr = []//声明一个新的数组用来接收查询数据
if(this.name == '') this.books = this.booksNew //如果查询名称为空，就显示所有的数据
//然后循环判断
for(let i=0;i<this.books.length;i++){
if(this.books[i].name.indexOf(this.name) != -1){
arr.push(this.books[i])//判断如果查询到就追加到arr中
}
}
this.books = arr
}
此时查询功能就完成了
