vue 对一个列表增删改查的代码
时间: 2024-03-26 09:40:56 浏览: 48
可以参考下面的示例代码,这是一个基于 Vue.js 的简单的增删改查列表:
```html
<template>
<div>
<input type="text" v-model="newItem" placeholder="Add new item" />
<button @click="addItem">Add</button>
<ul>
<li v-for="(item, index) in items" :key="index">
{{ item }}
<button @click="editItem(index)">Edit</button>
<button @click="deleteItem(index)">Delete</button>
</li>
</ul>
<div v-if="editing !== null">
<input type="text" v-model="items[editing]" />
<button @click="saveEdit">Save</button>
<button @click="cancelEdit">Cancel</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: ['Item 1', 'Item 2', 'Item 3'],
newItem: '',
editing: null,
};
},
methods: {
addItem() {
if (this.newItem.trim() !== '') {
this.items.push(this.newItem);
this.newItem = '';
}
},
editItem(index) {
this.editing = index;
},
deleteItem(index) {
if (confirm('Are you sure you want to delete this item?')) {
this.items.splice(index, 1);
}
},
saveEdit() {
this.editing = null;
},
cancelEdit() {
this.editing = null;
},
},
};
</script>
```
这个示例代码实现了一个简单的增删改查列表,包括以下操作:
- 添加新的列表项
- 编辑列表项
- 删除列表项
- 保存编辑
- 取消编辑
你可以根据实际需求进行修改和扩展。