1. 程式人生 > >vue頁面動態新增元素

vue頁面動態新增元素

1.動態插入元件

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