vue3.0自学之路总结第二篇(增删改查)
首先最简单的就是删除：
思路：删除是在现在的表单,根据id删除指定的内容，最后形成新的表单
data() {
//这里存放数据
return {
kfList: [
{
id: 1,
cname: "xxx有限公司",
name: "老孙",
tel: "188888888888",
address: "xx科技",
date1: "2019-12-01",
date2: "2020-01-01"
},
{
id: 2,
cname: "xxx有限公司",
name: "老郭",
tel: "17777777777",
address: "xxx城",
date1: "2018-05-30",
date2: "2018-11-30"
},
]
};
},
methods: {
// 获取需要渲染到页面中的数据
setSlist(arr) {
this.kfList = JSON.parse(JSON.stringify(arr));
},
delList(index){
this.kfList.splice(index, 1);//当前数据删除，依据传入的index来删除
this.setSlist(this.kfList);//渲染之后的数据代替原始数据
},
}
html代码：
kfList是我现在为操作的原始数据
setSlist是我操作之后重新渲染之后的数据
@click=>绑定点击事件(删除需要传值index)
添加思路：添加是在原始数据上新增数据
1.写一个添加的页面，在添加链接上写一个判断方法=>点击添加出现添加页面，点击添加页面中的取消或确定之后新页面都消失，新页面有新的数据存储地方，当点击确定添加成功之后才加入到了数据表里面
2.添加页面需要绑定新数据
html代码：<button class="btn_add" @click="changeOverlay()">添加</button>
data{
return{
isActive:false,//默认隐藏
//添加页面的数据
selectedlist: {
id: 0,
cname: "",
name: "",
tel: "",
address: "",
date1: "",
date2: ""
},
}
}
methods: {
//显示/隐藏
changeOverlay(){
this.isActive = !this.isActive;
},
addList() {
if (this.selectedlist.id == 0) {
//设置当前新增行的id
this.selectedlist.id = this.kfList.length + 1;
if (this.selectedlist.cname === )
{
alert("公司名称不能为空!");
}
else if(this.selectedlist.name === ){
alert("姓名不能为空!");
}
else if(this.selectedlist.tel === ){
alert("电话不能为空!");
}
else if(this.selectedlist.address === ){
alert("地址不能为空!");
}
else if(this.selectedlist.date1 === ){
alert("下单日期不能为空!");
}
else if(this.selectedlist.date2 === ){
alert("到期日期不能为空!");
}
else
{
this.kfList.push(this.selectedlist);
}
}
//添加完成需要把添加数据表单的数据还原
this.selectedlist = {id: 0,cname: "",name: "",tel: "",address: "",date1: "",date2: ""};
this.isActive = false;
},
}
其实改和查是一个效果，只是改有修改功能
思路：改实现了数据变换，写一个修改页面，获取当前id的数据，在修改页面确定之后形成新数据页面
html代码：
vue：
以上基本就是vue固定数据的增删改查，没有接口...
接口大家需要去了解axios
