用vue2写一个增删改查页面
时间: 2023-07-20 07:27:50 浏览: 46
好的,以下是一个简单的使用 Vue2 实现增删改查页面的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue2 增删改查页面示例</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>Vue2 增删改查页面示例</h1>
<!-- 添加数据 -->
<h2>添加数据</h2>
<form @submit.prevent="addData">
<input type="text" v-model="newData.name" placeholder="姓名">
<input type="text" v-model="newData.age" placeholder="年龄">
<button type="submit">添加</button>
</form>
<!-- 显示数据 -->
<h2>显示数据</h2>
<ul>
<li v-for="(data, index) in dataList" :key="index">
{{ data.name }},{{ data.age }}岁
<button @click="editData(index)">编辑</button>
<button @click="removeData(index)">删除</button>
</li>
</ul>
<!-- 编辑数据 -->
<h2>编辑数据</h2>
<form v-if="editIndex !== null" @submit.prevent="updateData">
<input type="text" v-model="editData.name" placeholder="姓名">
<input type="text" v-model="editData.age" placeholder="年龄">
<button type="submit">更新</button>
</form>
</div>
<script>
new Vue({
el: '#app',
data: {
dataList: [
{ name: '张三', age: 18 },
{ name: '李四', age: 20 },
{ name: '王五', age: 22 },
],
newData: {
name: '',
age: ''
},
editIndex: null,
editData: {
name: '',
age: ''
}
},
methods: {
addData() {
this.dataList.push({
name: this.newData.name,
age: this.newData.age
});
this.newData.name = '';
this.newData.age = '';
},
removeData(index) {
this.dataList.splice(index, 1);
},
editData(index) {
this.editIndex = index;
this.editData.name = this.dataList[index].name;
this.editData.age = this.dataList[index].age;
},
updateData() {
this.dataList[this.editIndex].name = this.editData.name;
this.dataList[this.editIndex].age = this.editData.age;
this.editIndex = null;
this.editData.name = '';
this.editData.age = '';
}
}
});
</script>
</body>
</html>
```
上面的代码实现了一个简单的增删改查页面,包括以下功能:
- 添加数据:表单输入姓名和年龄,点击添加按钮,将数据添加到数据列表中;
- 显示数据:将数据列表中的数据显示在页面上,同时提供编辑和删除按钮;
- 编辑数据:点击编辑按钮,弹出编辑表单,可以修改数据的姓名和年龄,点击更新按钮,将修改后的数据保存到数据列表中。
这只是一个简单的示例,您可以根据具体需求进行修改和扩展。