vue实现添加删除
Vue 实现添加和删除功能
在 Vue 中实现添加和删除功能通常涉及数据绑定、事件处理和列表渲染。以下是具体实现方法：
数据定义
在 Vue 实例或组件的 data 中定义一个数组来存储项目：
data() {
return {
items: [],
newItem: ''
}
}添加功能
创建一个方法将新项目添加到数组中：
methods: {
addItem() {
if (this.newItem.trim()) {
this.items.push(this.newItem)
this.newItem = ''
}
}
}在模板中添加输入框和按钮：
<input v-model="newItem" @keyup.enter="addItem">
<button @click="addItem">添加</button>删除功能
创建删除方法，通过索引移除项目：
methods: {
removeItem(index) {
this.items.splice(index, 1)
}
}在模板中渲染列表并添加删除按钮：
<ul>
<li v-for="(item, index) in items" :key="index">
{{ item }}
<button @click="removeItem(index)">删除</button>
</li>
</ul>使用 Vue 3 Composition API
对于 Vue 3，可以使用 setup 语法：
import { ref } from 'vue'
setup() {
const items = ref([])
const newItem = ref('')
const addItem = () => {
if (newItem.value.trim()) {
items.value.push(newItem.value)
newItem.value = ''
}
}
const removeItem = (index) => {
items.value.splice(index, 1)
}
return { items, newItem, addItem, removeItem }
}注意事项
- 为列表项添加唯一的
key属性以提高性能 - 添加输入验证防止空项目
- 考虑使用对象数组而不仅是字符串，以便存储更多信息
- 对于大型应用，可以考虑使用 Vuex 或 Pinia 进行状态管理
