2019-12-3 seo達(dá)人
實際業(yè)務(wù)比較復(fù)雜不便展示，寫一個簡單的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="關(guān)" active-color="#13ce66"></el-switch>
<button @click="showInfo(item)">查看</button>
</div>
js代碼：
new Vue({
el: '#app',
data() {
return {
demoArray: [],
};
},
created() {
// 生成模擬數(shù)據(jù)
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);
}
}
})
頁面展示：
修改一條數(shù)據(jù)：
驗證雙向綁定結(jié)果：
為了解決不確定數(shù)量的數(shù)據(jù)（數(shù)據(jù)來源可能是接口等）的展示和操作，將每條數(shù)據(jù)作為元素放在數(shù)組中，通過數(shù)組中元素的屬性來進(jìn)行雙向綁定。
整理的倉促，emmm，收工
藍(lán)藍(lán)設(shè)計的小編 http://www.z1277.cn