vue如何实现增加列表
Vue 实现列表增加功能的方法
数据驱动与响应式更新
在 Vue 中通过数据驱动视图更新，需先在组件的 data 选项中定义列表数据。例如声明一个空数组作为初始状态：
data() {
return {
itemList: []
}
}添加新项的方法
使用 push() 方法向数组添加新元素，Vue 会自动触发视图更新。可结合表单输入实现动态添加：
methods: {
addItem(newItem) {
this.itemList.push(newItem);
}
}模板绑定与事件处理
在模板中通过 v-for 渲染列表，并用 v-model 绑定输入框值。通过 @click 触发添加操作：
<input v-model="newItemText" placeholder="输入内容">
<button @click="addItem(newItemText)">添加</button>
<ul>
<li v-for="(item, index) in itemList" :key="index">{{ item }}</li>
</ul>对象列表的注意事项
当列表项为对象时，建议为每个对象分配唯一标识符作为 key，避免使用索引：
addItem() {
this.itemList.push({
id: Date.now(),
content: this.newItemText
});
}表单提交优化
可监听表单的 submit 事件并阻止默认刷新行为：
<form @submit.prevent="addItem">
<input v-model="newItemText">
<button type="submit">提交</button>
</form>
