用VUe写一个表单的增删改查
时间: 2024-05-09 22:16:15 浏览: 23
好的,以下是一个简单的示例:
首先,我们需要创建一个Vue实例并定义表单数据:
```html
<div id="app">
<h2>Add User</h2>
<form>
<input type="text" v-model="name" placeholder="Name">
<input type="email" v-model="email" placeholder="Email">
<input type="password" v-model="password" placeholder="Password">
<button type="button" @click="addUser">Add User</button>
</form>
<h2>Users</h2>
<ul>
<li v-for="(user, index) in users" :key="index">
{{ user.name }} - {{ user.email }}
<button type="button" @click="editUser(index)">Edit</button>
<button type="button" @click="deleteUser(index)">Delete</button>
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
name: '',
email: '',
password: '',
users: []
},
methods: {
addUser() {
this.users.push({
name: this.name,
email: this.email,
password: this.password
});
this.name = '';
this.email = '';
this.password = '';
},
editUser(index) {
this.name = this.users[index].name;
this.email = this.users[index].email;
this.password = this.users[index].password;
this.users.splice(index, 1);
},
deleteUser(index) {
this.users.splice(index, 1);
}
}
});
</script>
```
以上代码实现了一个简单的表单增删改查。你可以在输入框中输入用户信息,点击“Add User”按钮将用户添加到列表中。你可以单击“Edit”按钮编辑用户信息,单击“Delete”按钮删除用户。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)