页面结构
<ul>
<li v-for="(item, index) in itemArr" :key="index">
<el-input v-model="item.content"></el-input>
</li>
</ul>
<button @click="deleteEle(index)">删除</button>
<button @click="addEle">+添加元素</button>
data初始化
data() {
return {
itemArr: [{
content: ''
}]
}
}
方法
// 点击添加
addEle() {
this.itemArr.push({
content: ''
})
},
// 删除一项
deleteEle(index) {
this.itemArr.splice(index, 1);
},

这个示例展示了如何在Vue.js中使用`v-for`指令动态渲染输入元素,并提供了添加和删除元素的功能。数据初始化了一个包含空内容的对象数组,通过`addEle`方法可以向数组添加新的输入项,而`deleteEle`方法则根据传入的索引删除相应元素,实现了前端UI的动态交互。
666

被折叠的 条评论
为什么被折叠?



