题记
在vue框架中实现vue的增删改查,以下是具体操作流程和代码
编写TestView.vue文件
TestView.vue文件如下:
<template>
<div id="app">
<h1>学生列表</h1>
<input type="text" v-model="searchQuery" placeholder="输入姓名进行查询">
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(student, index) in filteredStudents" :key="index">
<td>{{ student.name }}</td>
<td>{{ student.age }}</td>
<td>
<button @click="editStudent(index)">编辑</button>
<button @click="deleteStudent(index)">删除</button>
</td>
</tr>
</tbody>
</table>
<h2>添加/编辑学生</h2>
<form @submit.prevent="saveStudent">
<label>姓名:</label>
<input type="text" v-model="newStudent.name" required>
<label>年龄:</label>
<input type="number" v-model="newStudent.age" required>
<button type="submit">{{ editingIndex === null ? '添加' : '保存' }}</button>
</form>
</div>
</template>
<script>
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);
}
}
}
</script>
<template>
<div id="app">
<h1>学生列表</h1>
<input type="text" v-model="searchQuery" placeholder="输入姓名进行查询">
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(student, index) in filteredStudents" :key="index">
<td>{{ student.name }}</td>
<td>{{ student.age }}</td>
<td>
<button @click="editStudent(index)">编辑</button>
<button @click="deleteStudent(index)">删除</button>
</td>
</tr>
</tbody>
</table>
<h2>添加/编辑学生</h2>
<form @submit.prevent="saveStudent">
<label>姓名:</label>
<input type="text" v-model="newStudent.name" required>
<label>年龄:</label>
<input type="number" v-model="newStudent.age" required>
<button type="submit">{{ editingIndex === null ? '添加' : '保存' }}</button>
</form>
</div>
</template>
<script>
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);
}
}
}
</script>
执行程序
注意:以上的代码需要在vue框架中运行,且是vue3的框架
展示图
后记
觉得有用可以点赞或收藏!