<li id="g3zqm"></li>
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，收工