五月天丁香婷深爱综合网,亚洲精品久久久中文字幕痴女,欧美日韩国产丝袜在线视频,午夜 ,国产乱弄免费视频在线播放_欧美日韩免费一区二区三区视频_经典自慰女生三级在线观看_三

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

2019-12-3    seo達(dá)人

實(shí)際業(yè)務(wù)比較復(fù)雜不便展示，寫一個(gè)簡(jiǎn)單的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);

        }

    }

})

頁(yè)面展示：







修改一條數(shù)據(jù)：







驗(yàn)證雙向綁定結(jié)果：







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



整理的倉(cāng)促，emmm，收工




分享本文至：

日歷

鏈接

個(gè)人資料

存檔