简单的vue增删改查页面
时间: 2023-10-08 12:03:59 浏览: 50
以下是一个简单的 Vue 增删改查页面示例:
HTML:
```html
<div id="app">
<h2>用户管理</h2>
<form @submit.prevent="addUser">
<input v-model="newUser.name" placeholder="姓名">
<input v-model="newUser.age" placeholder="年龄">
<button type="submit">添加</button>
</form>
<ul>
<li v-for="(user, index) in users">
<input v-model="user.name">
<input v-model="user.age">
<button @click="deleteUser(index)">删除</button>
</li>
</ul>
</div>
```
Vue:
```javascript
new Vue({
el: '#app',
data: {
newUser: {
name: '',
age: ''
},
users: [
{ name: '张三', age: '20' },
{ name: '李四', age: '22' },
{ name: '王五', age: '25' }
]
},
methods: {
addUser() {
this.users.push(this.newUser)
this.newUser = {
name: '',
age: ''
}
},
deleteUser(index) {
this.users.splice(index, 1)
}
}
})
```
上述代码实现了一个简单的用户管理页面,包括添加、删除和编辑用户的功能。其中,使用 `v-model` 指令将输入框的值与数据模型绑定,使用 `v-for` 指令遍历用户列表,使用 `@submit.prevent` 事件修饰符阻止默认提交行为,使用 `@click` 事件绑定删除用户的方法。