一，建立页面--如图
先实现按照name查询信息
给搜索框绑定“keyword”
<div id="root">
<input type="text" :class="selected" v-model="keyword" placeholder="请输入名字">
<ul>
<li v-for="(i,index) in listdata" :key="i.id">
{{i.id}}-{{i.name}}-{{i.age}}
</li>
</ul>
</div>
<script>
new Vue({
el:"#root",
data(){
return {
//原始表单数据
listdata: [
{ id: "0", name: "小明", age: "18" },
{ id: "1", name: "小王", age: "19" },
{ id: "2", name: "王明", age: "20" },
{ id: "3", name: "王红", age: "18" },
{ id: "4", name: "小红", age: "19" },
{ id: "5", name: "红明", age: "21" },
],
//搜索关键字
keyword:"",
}
}
})
</script>
过滤“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
// })
// }
// }
}
这是实现查询的完整代码
<style>
li {
list-style: none;
display: block;
padding: 20px;
font-size: 20px;
width: 150px;
cursor: pointer;
}
input {
margin: 20px;
padding: 5px;
}
</style>
<div id="root">
<input type="text" :class="selected" v-model="keyword" placeholder="请输入名字">
<ul>
<li v-for="(i,index) in filterdata" :key="i.id">
{{i.id}}-{{i.name}}-{{i.age}}
</li>
</ul>
</div>
<script>
new Vue({
el:"#root",
data(){
return {
//原始表单数据
listdata: [
{ id: "0", name: "小明", age: "18" },
{ id: "1", name: "小王", age: "19" },
{ id: "2", name: "王明", age: "20" },
{ id: "3", name: "王红", age: "18" },
{ id: "4", name: "小红", age: "19" },
{ id: "5", name: "红明", age: "21" },
],
//搜索关键字
keyword:"",
}
},
computed: {
filterdata() {
//返回过滤的值
return this.listdata.filter((i) => {
//箭头函数返回包含keyword的值（不用箭头函数要在外部定义—_this = this）
return i.name.indexOf(this.keyword) !== -1
})
},
//监听实现过滤
// keyword: {
// //立即调用 过滤空数组（全部数据）
// immediate: true,
// //监听改变
// handler(newval, oldval) {
// //用新的数组接收过滤后数组
// this.filterdata = this.listdata.filter((i) => {
// //监听改变返回包含newval的对象--直接赋值过滤后不可还原
// return i.name.indexOf(newval) !== -1
// })
// }
// }
},
})
</script>
功能实现如图
二，实现添加功能
写一个添加列表页和一个添加按钮 用v-show来控制添加页是否渲染 效果如图
给每个按钮绑定对应的事件 openadd（打开添加页）方法 改变添加页绑定的addsee值为1 使添加页显示 closeadd（关闭添加页）方法相反
完整代码如下
<style>
li {
list-style: none;
display: block;
padding: 20px;
font-size: 20px;
width: 150px;
cursor: pointer;
}
input {
margin: 20px;
padding: 5px;
}
.adddata {
position: absolute;
width: 200px;
background-color: #fff;
padding: 10px;
top: 300px;
left: 500px;
text-align: center;
transition: all .3s;
box-shadow: 0 0 10px rgba(0, 0, 0, .1);
}
</style>
<div id="root">
<input type="text" v-model="keyword" placeholder="请输入名字">
<button @click="openadd">添加信息</button>
<div class="adddata" v-show="addsee == 1">
添加信息
<input type="text" name="id" v-model="addlistdata.id" placeholder="请输入ID">
<input type="text" name="name" v-model="addlistdata.name" placeholder="请输入名称">
<input type="text" name="age" v-model="addlistdata.age" placeholder="请输入年龄">
<button @click="add" id="addbtn">确 认</button>
<button @click="closeadd">关 闭</button>
</div>
<ul>
<li v-for="(i,index) in filterdata" :key="i.id">
{{i.id}}-{{i.name}}-{{i.age}}
</li>
</ul>
</div>
<script>
new Vue({
el: "#root",
data() {
return {
//原始表单数据
listdata: [
{ id: "0", name: "小明", age: "18" },
{ id: "1", name: "小王", age: "19" },
{ id: "2", name: "王明", age: "20" },
{ id: "3", name: "王红", age: "18" },
{ id: "4", name: "小红", age: "19" },
{ id: "5", name: "红明", age: "21" },
],
//搜索关键字
keyword: "",
//输入的数据
addlistdata: { id: "", name: "", age: "" },
addsee: ""
}
},
computed: {
filterdata() {
//返回过滤的值
return this.listdata.filter((i) => {
//箭头函数返回包含keyword的值（不用箭头函数要在外部定义—_this = this）
return i.name.indexOf(this.keyword) !== -1
})
},
//监听实现过滤
// keyword: {
// //立即调用 过滤空数组（全部数据）
// immediate: true,
// //监听改变
// handler(newval, oldval) {
// //用新的数组接收过滤后数组
// this.filterdata = this.listdata.filter((i) => {
// //监听改变返回包含newval的对象--直接赋值过滤后不可还原
// return i.name.indexOf(newval) !== -1
// })
// }
// }
},
methods: {
openadd() {
this.addsee="1"
},
closeadd(){
this.addsee=""
},
add(){
},
}
})
</script>
接下来实现添加数据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添加功能也完成了
此时完整代码如下
<style>
li {
list-style: none;
display: block;
padding: 20px;
font-size: 20px;
width: 150px;
cursor: pointer;
}
input {
margin: 20px;
padding: 5px;
}
.adddata {
position: absolute;
width: 200px;
background-color: #fff;
padding: 10px;
top: 300px;
left: 500px;
text-align: center;
transition: all .3s;
box-shadow: 0 0 10px rgba(0, 0, 0, .1);
}
</style>
<div id="root">
<input type="text" v-model="keyword" placeholder="请输入名字">
<button @click="openadd">添加信息</button>
<div class="adddata" v-show="addsee == 1">
添加信息
<input type="text" name="id" v-model="addlistdata.id" placeholder="请输入ID">
<input type="text" name="name" v-model="addlistdata.name" placeholder="请输入名称">
<input type="text" name="age" v-model="addlistdata.age" placeholder="请输入年龄">
<button @click="add" id="addbtn">确 认</button>
<button @click="closeadd">关 闭</button>
</div>
<ul>
<li v-for="(i,index) in filterdata" :key="i.id">
{{i.id}}-{{i.name}}-{{i.age}}
</li>
</ul>
</div>
<script>
new Vue({
el: "#root",
data() {
return {
//原始表单数据
listdata: [
{ id: "0", name: "小明", age: "18" },
{ id: "1", name: "小王", age: "19" },
{ id: "2", name: "王明", age: "20" },
{ id: "3", name: "王红", age: "18" },
{ id: "4", name: "小红", age: "19" },
{ id: "5", name: "红明", age: "21" },
],
//搜索关键字
keyword: "",
//输入的数据
addlistdata: { id: "", name: "", age: "" },
addsee: ""
}
},
computed: {
filterdata() {
//返回过滤的值
return this.listdata.filter((i) => {
//箭头函数返回包含keyword的值（不用箭头函数要在外部定义—_this = this）
return i.name.indexOf(this.keyword) !== -1
})
},
//监听实现过滤
// keyword: {
// //立即调用 过滤空数组（全部数据）
// immediate: true,
// //监听改变
// handler(newval, oldval) {
// //用新的数组接收过滤后数组
// this.filterdata = this.listdata.filter((i) => {
// //监听改变返回包含newval的对象--直接赋值过滤后不可还原
// return i.name.indexOf(newval) !== -1
// })
// }
// }
},
methods: {
openadd() {
this.addsee="1"
},
closeadd(){
this.addsee=""
},
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("添加成功")
}
},
}
})
</script>
三，实现删除功能
这一步跟添加一样 先写一个删除页一个删除按钮同样用v-show控制删除页的显示 最后给按钮绑定功能 -----效果如图
代码如下
<div class="deldata" v-show="delsee == 1">
删除信息
<input type="text" name="id" v-model="addlistdata.id" placeholder="请输入ID">
<input type="text" name="name" v-model="addlistdata.name" placeholder="请输入名称">
<input type="text" name="age" v-model="addlistdata.age" placeholder="请输入年龄">
<button @click="del">确 认</button>
<button @click="closedel">关 闭</button>
</div>
注意再打开删除页时添加页应该关闭 因此在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不存在")
}
},
删除效果如图
至此删除功能就完成了 完整代码如下
<style>
li {
list-style: none;
display: block;
padding: 20px;
font-size: 20px;
width: 150px;
cursor: pointer;
}
input {
margin: 20px;
padding: 5px;
}
button {
padding: 5px;
margin: 10px;
}
.deldata,
.adddata {
position: absolute;
width: 200px;
background-color: #fff;
padding: 10px;
top: 300px;
left: 500px;
text-align: center;
transition: all .3s;
box-shadow: 0 0 10px rgba(0, 0, 0, .1);
}
</style>
<div id="root">
<input type="text" v-model="keyword" placeholder="请输入名字">
<button @click="openadd">添加信息</button><button @click="opendel">删除信息</button>
<div class="adddata" v-show="addsee == 1">
添加信息
<input type="text" name="id" v-model="addlistdata.id" placeholder="请输入ID">
<input type="text" name="name" v-model="addlistdata.name" placeholder="请输入名称">
<input type="text" name="age" v-model="addlistdata.age" placeholder="请输入年龄">
<button @click="add" id="addbtn">确 认</button>
<button @click="closeadd">关 闭</button>
</div>
<div class="deldata" v-show="delsee == 1">
删除信息
<input type="text" name="id" v-model="addlistdata.id" placeholder="请输入ID">
<input type="text" name="name" v-model="addlistdata.name" placeholder="请输入名称">
<input type="text" name="age" v-model="addlistdata.age" placeholder="请输入年龄">
<button @click="del">确 认</button>
<button @click="closedel">关 闭</button>
</div>
<ul>
<li v-for="(i,index) in filterdata" :key="i.id">
{{i.id}}-{{i.name}}-{{i.age}}
</li>
</ul>
</div>
<script>
new Vue({
el: "#root",
data() {
return {
//原始表单数据
listdata: [
{ id: "0", name: "小明", age: "18" },
{ id: "1", name: "小王", age: "19" },
{ id: "2", name: "王明", age: "20" },
{ id: "3", name: "王红", age: "18" },
{ id: "4", name: "小红", age: "19" },
{ id: "5", name: "红明", age: "21" },
],
//搜索关键字
keyword: "",
//输入的数据
addlistdata: { id: "", name: "", age: "" },
addsee: "",
delsee: ""
}
},
computed: {
filterdata() {
//返回过滤的值
return this.listdata.filter((i) => {
//箭头函数返回包含keyword的值（不用箭头函数要在外部定义—_this = this）
return i.name.indexOf(this.keyword) !== -1
})
},
//监听实现过滤
// keyword: {
// //立即调用 过滤空数组（全部数据）
// immediate: true,
// //监听改变
// handler(newval, oldval) {
// //用新的数组接收过滤后数组
// this.filterdata = this.listdata.filter((i) => {
// //监听改变返回包含newval的对象--直接赋值过滤后不可还原
// return i.name.indexOf(newval) !== -1
// })
// }
// }
},
methods: {
openadd() {
this.addsee="1"
this.closedel()
},
closeadd(){
this.addsee=""
},
opendel(){
this.delsee="1"
this.closeadd()
},
closedel(){
this.delsee=""
},
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("添加成功")
}
},
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不存在")
}
},
}
})
</script>
四，修改功能
这一步跟添加一样 先写一个修改页用v-show控制修改页的显示，给id输入框写上disable属性-不可修改，给li绑定一个openup （打开修改页）方法，最后给按钮绑定up（修改）方法和closeup（关闭修改页）方法
注意 openup（i）方法有一个形参即listdata中的某个对象，这也是点击的那个对象在openup方法中将信息对象赋值给input框 方便修改 另外页面始终只有一个操作页是打开状态 因此在打开某个操作页时应该调用其他操作页关闭的方法 最后在修改页关闭时要初始化addlistdata值
代码如下
<div class="updata" v-show="upsee == 1">
修改信息
<input type="text" name="id" v-model="addlistdata.id" placeholder="请输入ID" disabled>
<input type="text" name="name" v-model="addlistdata.name" placeholder="请输入名称">
<input type="text" name="age" v-model="addlistdata.age" placeholder="请输入年龄">
<button @click="up">确 认</button>
<button @click="closeup">关 闭</button>
</div>
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("修改成功")
}
}
})
}
修改效果如图
至此增删改查效果就完成啦 ！！！
下面是完整代码
<style>
li {
list-style: none;
display: block;
padding: 20px;
font-size: 20px;
width: 150px;
cursor: pointer;
}
li:hover {
background-color: #f4f4f4;
}
input {
margin: 20px;
padding: 5px;
}
button {
padding: 5px;
margin: 10px;
}
.updata,
.deldata,
.adddata {
position: absolute;
width: 200px;
background-color: #fff;
padding: 10px;
top: 300px;
left: 500px;
text-align: center;
transition: all .3s;
box-shadow: 0 0 10px rgba(0, 0, 0, .1);
}
</style>
<div id="root">
<input type="text" v-model="keyword" placeholder="请输入名字">
<button @click="openadd">添加信息</button><button @click="opendel">删除信息</button>
<div class="adddata" v-show="addsee == 1">
添加信息
<input type="text" name="id" v-model="addlistdata.id" placeholder="请输入ID">
<input type="text" name="name" v-model="addlistdata.name" placeholder="请输入名称">
<input type="text" name="age" v-model="addlistdata.age" placeholder="请输入年龄">
<button @click="add" id="addbtn">确 认</button>
<button @click="closeadd">关 闭</button>
</div>
<div class="deldata" v-show="delsee == 1">
删除信息
<input type="text" name="id" v-model="addlistdata.id" placeholder="请输入ID">
<input type="text" name="name" v-model="addlistdata.name" placeholder="请输入名称">
<input type="text" name="age" v-model="addlistdata.age" placeholder="请输入年龄">
<button @click="del">确 认</button>
<button @click="closedel">关 闭</button>
</div>
<div class="updata" v-show="upsee == 1">
修改信息
<input type="text" name="id" v-model="addlistdata.id" placeholder="请输入ID" disabled>
<input type="text" name="name" v-model="addlistdata.name" placeholder="请输入名称">
<input type="text" name="age" v-model="addlistdata.age" placeholder="请输入年龄">
<button @click="up">确 认</button>
<button @click="closeup">关 闭</button>
</div>
<ul>
<li v-for="(i,index) in filterdata" :key="i.id" @click="openup(i)">
{{i.id}}-{{i.name}}-{{i.age}}
</li>
</ul>
</div>
<script>
new Vue({
el: "#root",
data() {
return {
//原始表单数据
listdata: [
{ id: "0", name: "小明", age: "18" },
{ id: "1", name: "小王", age: "19" },
{ id: "2", name: "王明", age: "20" },
{ id: "3", name: "王红", age: "18" },
{ id: "4", name: "小红", age: "19" },
{ id: "5", name: "红明", age: "21" },
],
//搜索关键字
keyword: "",
//输入的数据
addlistdata: { id: "", name: "", age: "" },
addsee: "",
delsee: "",
upsee:""
}
},
computed: {
filterdata() {
//返回过滤的值
return this.listdata.filter((i) => {
//箭头函数返回包含keyword的值（不用箭头函数要在外部定义—_this = this）
return i.name.indexOf(this.keyword) !== -1
})
},
//监听实现过滤
// keyword: {
// //立即调用 过滤空数组（全部数据）
// immediate: true,
// //监听改变
// handler(newval, oldval) {
// //用新的数组接收过滤后数组
// this.filterdata = this.listdata.filter((i) => {
// //监听改变返回包含newval的对象--直接赋值过滤后不可还原
// return i.name.indexOf(newval) !== -1
// })
// }
// }
},
methods: {
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: "" }
},
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("添加成功")
}
},
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不存在")
}
},
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("修改成功")
}
}
})
}
}
})
</script>
