纯Vue实现增删改查小案例
废话少说直接上代码-----------
一，建立页面--如图
先实现按照name查询信息
给搜索框绑定“keyword”
-
{{i.id}}-{{i.name}}-{{i.age}}
过滤“listdata”中包含“keyword”的所以对象--计算属性“computed”和侦听“watch”都可实现，这里使用计算属性实现 “filterdata”为过滤后的数据 这时 li 列表遍历的对象应该改为“filterdata”
computed: {
filterdata() {
//返回过滤的值
return this.listdata.filter((i) => {
return i.name.indexOf(this.keyword) !== -1
})
}
},这是侦听实现过滤的代码
watch:{
// keyword: {
// //立即调用 过滤空数组（全部数据）
// immediate: true,
// //监听改变
// handler(newval, oldval) {
// //用新的数组接收过滤后数组
// this.filterdata = this.listdata.filter((i) => {
// //监听改变返回包含newval的对象--直接赋值过滤后不可还原
// return i.name.indexOf(newval) !== -1
// })
// }
// }
}这是实现查询的完整代码
-
{{i.id}}-{{i.name}}-{{i.age}}
功能实现如图
二，实现添加功能
写一个添加列表页和一个添加按钮 用v-show来控制添加页是否渲染 效果如图
给每个按钮绑定对应的事件 openadd（打开添加页）方法 改变添加页绑定的addsee值为1 使添加页显示 closeadd（关闭添加页）方法相反
完整代码如下
添加信息
-
{{i.id}}-{{i.name}}-{{i.age}}
接下来实现添加数据add方法 这里注意 为避免输入的id重复 这里获取了所以id并找出最大的id限制输入的id必须大于最大id 并且添加完成后要初始化addlistdata数据使其为空
add() {
var arr = []
//获取所有id
for (let i = 0; i < this.listdata.length; i++) {
arr.push(this.listdata[i].id)
}
//获取最大ID值
var max = Math.max.apply(null, arr);
//判断输入id小于最大id
if (this.addlistdata.id <= max) {
alert("请输入合法的id,必须大于" + max)
//判断name为空
} else if (this.addlistdata.name == "") {
alert("请输入名字")
//判断年龄范围
} else if (this.addlistdata.age < 15 || this.addlistdata.age > 25) {
alert("请输入合适的年龄（15~25）")
} else {
//添加addlistdata到listdata
this.listdata.push(this.addlistdata)
//初始化addlistdata对象 使其为空
this.addlistdata = { id: "", name: "", age: "" }
//调用closeadd方法关闭页面
this.closeadd()
alert("添加成功")
}
},效果如图
添加成功 OK添加功能也完成了
此时完整代码如下
添加信息
-
{{i.id}}-{{i.name}}-{{i.age}}
三，实现删除功能
这一步跟添加一样 先写一个删除页一个删除按钮同样用v-show控制删除页的显示 最后给按钮绑定功能 -----效果如图
代码如下
删除信息
注意再打开删除页时添加页应该关闭 因此在opendel（打开删除页）方法里调用closedel（关闭删除页）方法 同样openadd方法里也要调用closedel方法 保证同时只有一个操作业面打开
openadd() {
this.addsee="1"
this.closedel()
},
closeadd(){
this.addsee=""
},
opendel(){
this.delsee="1"
this.closeadd()
},
closedel(){
this.delsee=""
},接下来实现del（删除信息）方法---代码如下 注意注意 这里的逻辑是使用forEach方法找出输入的id对应信息的索引值，根据这个索引值进行删除 。用arr 接收这个信息的id和index再通过逻辑判断进行删除，删除后也要初始化addlistdata的
del() {
//定义需要删除的id对象 初始为空
let arr = { id: "", index: "" }
this.listdata.forEach((item, index) => {
if (this.addlistdata.id == item.id) {
//给id对象赋值
arr = { id: item.id, index: index }
}
})
//判断id为空
if (this.addlistdata.id == "") {
alert("请输入将要删除的ID")
//判断id存在即删除
} else if (this.addlistdata.id == arr.id) {
//删除此ID对应的索引的信息
this.listdata.splice(arr.index, 1)
//初始化addlistdata对象 使其为空
this.addlistdata = { id: "", name: "", age: "" }
this.closedel()
alert("删除成功")
//判断id不存在
} else {
alert("此ID不存在")
}
},删除效果如图
至此删除功能就完成了 完整代码如下
添加信息
删除信息
-
{{i.id}}-{{i.name}}-{{i.age}}
四，修改功能
这一步跟添加一样 先写一个修改页用v-show控制修改页的显示，给id输入框写上disable属性-不可修改，给li绑定一个openup （打开修改页）方法，最后给按钮绑定up（修改）方法和closeup（关闭修改页）方法
注意 openup（i）方法有一个形参即listdata中的某个对象，这也是点击的那个对象在openup方法中将信息对象赋值给input框 方便修改 另外页面始终只有一个操作页是打开状态 因此在打开某个操作页时应该调用其他操作页关闭的方法 最后在修改页关闭时要初始化addlistdata值
代码如下
修改信息
openadd() {
this.addsee="1"
this.closedel()
this.closeup()
},
closeadd(){
this.addsee=""
},
opendel(){
this.delsee="1"
this.closeadd()
this.closeup()
},
closedel(){
this.delsee=""
},
openup(i){
this.closeadd()
this.closedel()
this.upsee = "1"
this.addlistdata = { id: i.id, name: i.name, age: i.age }
},
closeup(){
this.upsee = ""
this.addlistdata = { id: "", name: "", age: "" }
},-----效果如图
最后就是修改方法的实现了---代码如下
注意 这里也是用forEach获取当前信息的索引值 再根据索引修改信息 修改成功后要调用closeup方法关闭修改页并初始化addlistdata值
up() {
//获取要修改的信息索引
this.listdata.forEach((item, index) => {
if (this.addlistdata.id == item.id) {
//判断名字合法
if (this.addlistdata.name == "") {
alert("请输入名字")
//判断年龄
} else if (this.addlistdata.age < 15 || this.addlistdata.age > 25) {
alert("请输入合适的年龄（15~25）")
} else {
//修改信息
this.listdata[index].name = this.addlistdata.name
this.listdata[index].age = this.addlistdata.age
this.closeup()
alert("修改成功")
}
}
})
}修改效果如图
至此增删改查效果就完成啦 ！！！
下面是完整代码
添加信息
删除信息
修改信息
-
{{i.id}}-{{i.name}}-{{i.age}}