vue页面动态添加标签

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);
},

关注微博、微信公众号搜索前端小木，让我们一起学习成长。