vue页面动态添加标签
1.动态插入组件将需要插入到页面的元素定义成一个组件,再进行操作。参考:https://jintang.github.io/2018/03/27/vue动态添加组件/2.页面直接添加元素页面结构代码:<ul><li v-for="(item, index) in itemArr" :key=&am
·
1.动态插入组件
将需要插入到页面的元素定义成一个组件,再进行操作。
参考:https://jintang.github.io/2018/03/27/vue%E5%8A%A8%E6%80%81%E6%B7%BB%E5%8A%A0%E7%BB%84%E4%BB%B6/
2.页面直接添加
页面结构代码:
<ul>
<li v-for="(item, index) in itemArr" :key="index">
<el-input v-model="item.content"></el-input>
</li>
</ul>
<button @click="deleteEle()">删除</button>
<button @click="addEle">+添加元素</button>
data初始化:
data() {
return {
itemArr: [{
content: ''
}]
}
}
方法:
// 点击添加
addEle() {
this.itemArr.push({
content: ''
})
},
// 删除一项
deleteEle(index) {
this.itemArr.splice(index, 1);
},
关注微博、微信公众号搜索前端小木,让我们一起学习成长。
更多推荐
已为社区贡献3条内容
所有评论(0)