以下是一个基于
Vue的
增删改查示例，包含了对应的函数调用：
```html
<template>
<div>
<h2>用户管理</h2>
<
table>
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="user in users" :key="user.id">
<td>{{ user.id }}</td>
<td>{{ user.name }}</td>
<td>{{ user.age }}</td>
<td>
<button @click="editUser(user)">编辑</button>
<button @click="d
eleteUser(user)">删除</button>
</td>
</tr>
</tbody>
</
table>
<form v-if="showForm" @submit.prevent="saveUser">
<h3>{{ formTitle }}</h3>
<lab
el for="name">姓名：</lab
el>
<
input type="text" id="name" v-mod
el="currentUser.name" required>
<lab
el for="age">年龄：</lab
el>
<
input type="number" id="age" v-mod
el="currentUser.age" required>
<button type="submit">{{ formSubmitLab
el }}</button>
<button type="button" @click="canc
elEdit">取消</button>
</form>
<button @click="addUser">添加用户</button>
</div>
</template>
<script>
export default {
data() {
return {
users: [
{ id: 1, name: '张三', age: 20 },
{ id: 2, name: '李四', age: 25 },
{ id: 3, name: '王五', age: 30 }
],
showForm: false,
formTitle: '',
formSubmitLab
el: '',
currentUser: {
id: null,
name: '',
age: null
}
}
},
methods: {
addUser() {
this.currentUser = { id: null, name: '', age: null }
this.formTitle = '添加用户'
this.formSubmitLab
el = '添加'
this.showForm = true
},
editUser(user) {
this.currentUser = { ...user }
this.formTitle = '编辑用户'
this.formSubmitLab
el = '保存'
this.showForm = true
},
d
eleteUser(user) {
const index = this.users.findIndex(u => u.id === user.id)
this.users.splice(index, 1)
},
saveUser() {
if (this.currentUser.id === null) {
// 添加用户
this.currentUser.id = this.users.length + 1
this.users.push({ ...this.currentUser })
}
else {
// 修改用户
const index = this.users.findIndex(u => u.id === this.currentUser.id)
this.users.splice(index, 1, { ...this.currentUser })
}
this.showForm = false
},
canc
elEdit() {
this.showForm = false
}
}
}
</script>
```
在上面的示例代码中，我们定义了一个 `users` 数组来存储用户数据，同时定义了一些用于
增删改查操作的方法：
- `addUser`：添加用户操作，将 `currentUser` 对象重置为初始值并显示表单；
- `editUser`：编辑用户操作，将 `currentUser` 对象设置为要编辑的用户并显示表单；
- `d
eleteUser`：删除用户操作，根据用户ID从 `users` 数组中删除对应的用户；
- `saveUser`：保存用户操作，根据 `currentUser` 对象来判断是添加用户还是修改用户，并将用户数据更新到 `users` 数组中；
- `canc
elEdit`：取消编辑操作，将 `showForm` 属性设置为 `false` 隐藏表单。
在模板中，我们通过 `v-for` 指令来遍历 `users` 数组并显示用户数据，同时为每个用户添加编辑和删除按钮。当需要添加或编辑用户时，会显示一个表单来输入用户信息，保存或取消操作后表单会隐藏。
需要注意的是，以上示例代码仅供参考，实际开发中还需要考虑一些其他的情况，如数据
校验、错误处理等。
最低0.47元/天 解锁文章
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
