vue写一个增删改查带代码
时间: 2023-04-03 16:00:25 浏览: 56
好的,以下是一个简单的 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="deleteUser(user)">删除</button>
</td>
</tr>
</tbody>
</table>
<h2 v-if="editingUser">编辑用户</h2>
<form v-if="editingUser" @submit.prevent="saveUser">
<label>
姓名:
<input type="text" v-model="editingUser.name" required>
</label>
<label>
年龄:
<input type="number" v-model="editingUser.age" required>
</label>
<button type="submit">保存</button>
<button type="button" @click="cancelEdit">取消</button>
</form>
<h2>添加用户</h2>
<form @submit.prevent="addUser">
<label>
姓名:
<input type="text" v-model="newUser.name" required>
</label>
<label>
年龄:
<input type="number" v-model="newUser.age" required>
</label>
<button type="submit">添加</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
users: [
{ id: 1, name: '张三', age: 18 },
{ id: 2, name: '李四', age: 20 },
{ id: 3, name: '王五', age: 22 },
],
newUser: { name: '', age: '' },
editingUser: null,
};
},
methods: {
addUser() {
const id = this.users.length + 1;
this.users.push({ id, ...this.newUser });
this.newUser = { name: '', age: '' };
},
editUser(user) {
this.editingUser = { ...user };
},
saveUser() {
const index = this.users.findIndex(u => u.id === this.editingUser.id);
this.users.splice(index, 1, this.editingUser);
this.editingUser = null;
},
cancelEdit() {
this.editingUser = null;
},
deleteUser(user) {
const index = this.users.findIndex(u => u.id === user.id);
this.users.splice(index, 1);
},
},
};
</script>
```
这个示例包含了一个用户列表,可以添加、编辑和删除用户。其中,`users` 数组保存了所有用户的信息,`newUser` 对象保存了正在添加的用户信息,`editingUser` 对象保存了正在编辑的用户信息。在模板中,使用 `v-for` 指令遍历 `users` 数组,显示每个用户的信息和操作按钮。点击编辑按钮时,将对应的用户信息复制到 `editingUser` 对象中,并显示编辑表单;点击保存按钮时,将修改后的用户信息保存回 `users` 数组中,并隐藏编辑表单;点击取消按钮时,只隐藏编辑表单,不保存任何修改。添加用户的表单和编辑用户的表单类似,只是在提交时的处理不同。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)