vue增删改查函数调用
时间: 2023-06-21 08:07:53 浏览: 45
Vue.js 是一个以数据驱动和组件化的方式构建 Web 界面的JavaScript 框架,其提供了响应式和组件化的视图组件,可以方便地实现增删改查的功能。
下面是一个简单的 Vue.js 示例代码,其中包含了增删改查的函数调用:
```html
<!-- HTML 模板 -->
<div id="app">
<h2>用户列表</h2>
<table>
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(user, index) in users" :key="index">
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.age}}</td>
<td>
<button @click="editUser(index)">编辑</button>
<button @click="deleteUser(index)">删除</button>
</td>
</tr>
</tbody>
</table>
<h2>添加/编辑用户</h2>
<form @submit.prevent="saveUser">
<label for="name">姓名:</label>
<input type="text" v-model="currentUser.name" required>
<br>
<label for="age">年龄:</label>
<input type="number" v-model="currentUser.age" required>
<br>
<button type="submit">{{editingIndex === null ? '添加' : '保存'}}</button>
</form>
</div>
```
```javascript
// JavaScript 代码
new Vue({
el: '#app',
data: {
users: [
{id: 1, name: '张三', age: 20},
{id: 2, name: '李四', age: 25},
{id: 3, name: '王五', age: 30},
],
currentUser: {name: '', age: ''},
editingIndex: null,
},
methods: {
editUser(index) {
// 编辑用户
this.editingIndex = index;
this.currentUser = Object.assign({}, this.users[index]);
},
deleteUser(index) {
// 删除用户
this.users.splice(index, 1);
},
saveUser() {
// 保存用户
if (this.editingIndex === null) {
// 添加用户
this.users.push({
id: this.users.length + 1,
name: this.currentUser.name,
age: this.currentUser.age,
});
} else {
// 保存编辑后的用户
this.users.splice(this.editingIndex, 1, {
id: this.users[this.editingIndex].id,
name: this.currentUser.name,
age: this.currentUser.age,
});
this.editingIndex = null;
}
this.currentUser.name = '';
this.currentUser.age = '';
},
},
});
```
上述代码中,我们定义了一个 Vue 实例,其中包含了一个 `users` 数组,用于存储用户数据;一个 `currentUser` 对象,用于存储当前正在编辑或添加的用户数据;一个 `editingIndex` 变量,用于存储当前正在编辑的用户在 `users` 数组中的下标。
在 HTML 模板中,我们使用了 Vue.js 的指令 `v-for` 和 `v-model`,分别用于循环渲染用户列表和双向绑定当前正在编辑或添加的用户数据。
在 JavaScript 代码中,我们定义了三个方法:`editUser`、`deleteUser` 和 `saveUser`,分别用于编辑、删除和保存用户数据。其中,`editUser` 方法会将当前正在编辑的用户数据赋值给 `currentUser` 对象,并将 `editingIndex` 变量赋值为当前用户在 `users` 数组中的下标;`deleteUser` 方法会使用 `splice` 方法从 `users` 数组中删除指定下标的用户数据;`saveUser` 方法会根据 `editingIndex` 变量的值判断是添加新用户还是保存编辑后的用户,并将新的用户数据添加到 `users` 数组中或更新 `users` 数组中对应下标的用户数据。
在 HTML 模板中,我们使用 `@click` 指令将编辑和删除用户的方法绑定到按钮的点击事件上;在添加/编辑用户的表单中,我们使用 `@submit.prevent` 指令将保存用户的方法绑定到表单的提交事件上,并使用 `v-if` 指令根据 `editingIndex` 变量的值显示添加或保存按钮。