vue实现一个简单增删改查
时间: 2024-01-05 13:04:57 浏览: 38
的前端页面应该怎么做?
首先,需要搭建一个基本的 Vue.js 项目。然后,创建一个数据模型来存储我们要进行增删改查的数据。接下来,我们可以使用 Vue.js 的模板语法和 v-for 指令来展示数据列表,并且可以通过添加表单来实现数据的增加和修改。最后,我们可以使用 v-bind 和 v-on 指令来绑定删除按钮的点击事件,实现数据的删除功能。 代码示例:
<template>
<div>
<!-- 列表 -->
<ul>
<li v-for="(item, index) in list" :key="index"> {{ item }} <button @click="removeItem(index)">删除</button> </li>
</ul>
<!-- 添加表单 -->
<form @submit.prevent="addItem">
<input v-model="newItem">
<button type="submit">添加</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
list: ['item1', 'item2', 'item3'], // 初始数据
newItem: '' // 新添加的数据
}
},
methods: {
addItem() {
this.list.push(this.newItem)
this.newItem = '' // 清空输入框
},
removeItem(index) {
this.list.splice(index, 1)
}
}
}
</script>