国产精品久久蜜臀av,国产一区二区亚洲三区,午夜福利视频网站

日本阿v片在线播放免费,成人国产片视频在线观看,日韩黄片毛片在线观看,一区亚洲电影,琪琪秋霞午夜av影视在线,中文字幕在线视频不卡,最新大伊香蕉精品视频在线,亚洲AV无码日韩一区二区乱

v-for生成多個div并給div中的組件綁定值

2019-12-3 seo達人

實際業務比較復雜不便展示，寫一個簡單的demo記錄此功能

遍歷此div：

<div v-for="item in demoArray">

<input type="text" v-model="item.name">

<el-switch class="exio-switch" v-model="item.status" active-text="開" inactive- text="關" active-color="#13ce66"></el-switch>

<button @click="showInfo(item)">查看</button>

</div>

js代碼：

new Vue({

el: '#app',

data() {

return {

demoArray: [],

};

},

created() {

// 生成模擬數據

for (let i = 0; i < 5; i++) {

let e = {};

e.name = "div"+i;

e.status = true;

this.demoArray.push(e);

}

},

methods: {

showInfo(item) {

console.log(item.name);

console.log(item.status);

}

}

})

頁面展示：

修改一條數據：

驗證雙向綁定結果：

為了解決不確定數量的數據（數據來源可能是接口等）的展示和操作，將每條數據作為元素放在數組中，通過數組中元素的屬性來進行雙向綁定。

整理的倉促，emmm，收工