在vue框架中实现vue的增删改查,以下是具体操作流程和代码
TestView.vue文件如下:
学生列表
姓名
年龄
操作
{{ student.name }}
{{ student.age }}
添加/编辑学生
export default{
data() {
return{
students: [
{ name: 'ng1', age: 18 },
{ name: 'ng2', age: 20 },
{ name: 'ng3', age: 22 }
],
// 还定义了一个newStudent对象,用于存储正在添加或编辑的学生的临时数据
// editingIndex变量用于记录正在编辑的学生的索引。
// searchQuery变量用于存储用户输入的查询关键字。
newStudent: {
name: '',
age: ''
},
editingIndex: null,
searchQuery: ''
}
},
// 在computed属性中,定义了一个名为filteredStudents的计算属性,
// 它根据searchQuery的值对students数组进行过滤,
// 如果searchQuery为空,则返回所有学生信息;否则,返回包含查询关键字的学生信息。
computed: {
filteredStudents() {
if (this.searchQuery === '') {
return this.students;
} else {
//使用Array的filter方法遍历students数组,并对每个学生对象的姓名进行判断
//使用了箭头函数语法,表示对每个学生对象进行匿名函数的操作。
//在函数体内部,使用了String的includes方法,
//判断学生的姓名中是否包含了searchQuery属性的值(即用户输入的查询关键字)。
//如果包含了,就将该学生对象保留在过滤后的数组中。
return this.students.filter(student => {
return student.name.includes(this.searchQuery);
});
}
}
},
methods: {
//saveStudent方法用于保存或更新学生信息。
//通过判断editingIndex是否为null来确定当前是添加学生还是编辑学生的操作。
//如果editingIndex为null,表示当前是添加学生的操作,将newStudent对象添加到students数组中。
//如果editingIndex不为null,表示当前是编辑学生的操作,
//将newStudent对象替换students数组中对应索引的学生信息。
//将editingIndex重置为null,表示编辑操作已完成。
//将newStudent对象重置为空对象,以清空输入框中的内容。
saveStudent() {
if (this.editingIndex === null) {
// 添加学生
this.students.push({ ...this.newStudent });
} else {
// 编辑学生
this.students[this.editingIndex] = { ...this.newStudent };
this.editingIndex = null;
}
this.newStudent = { name: '', age: '' };
},
//editStudent方法用于编辑学生信息。
//当点击编辑按钮时,传入对应学生的索引作为参数。
//在方法内部,将该学生的信息复制到newStudent对象中,以便在表单中显示出来。
//同时,将editingIndex设置为该学生的索引,以标记当前正在编辑的学生。
editStudent(index) {
this.newStudent = { ...this.students[index] };
this.editingIndex = index;
},
//在方法内部,使用splice方法从students数组中删除对应索引的学生信息。
deleteStudent(index) {
this.students.splice(index, 1);
}
}
}
学生列表
姓名
年龄
操作
{{ student.name }}
{{ student.age }}
添加/编辑学生
注意:以上的代码需要在vue框架中运行,且是vue3的框架
觉得有用可以点赞或收藏!