vue页面动态添加元素

版权声明：本BLOG上原创文章未经本人许可，不得用于商业用途及传统媒体。网络媒体转载请注明出处，否则属于侵权行为。 https://blog.csdn.net/liaoxuewu/article/details/82784653

1.动态插入组件

将需要插入到页面的元素定义成一个组件，再进行操作。
参考：https://jintang.github.io/2018/03/27/vue动态添加组件/

2.页面直接添加元素

页面结构代码：

<ul>
    <li v-for="(item, index) in itemArr" :key="index">
    {{index + 1}}.<el-input v-model="items[index]" ></el-input>
    <span @click="delete(index)">删除</span>
    /li>
</ul>
<span @click="addEle" pointer">+添加元素</span>

data初始化：

data() {
    return {
        items: [0] 
        ele: ''
    }
}

方法：

//点击添加
addExceptPrice() {
    this.ele ++;
    this.itemArr.push(this.ele)
},
//删除一项
deleteExceptPrice(index) {
    this.itemArr.splice(index, 1);
}