Vue $set 動(dòng)態(tài)響應(yīng)數(shù)據(jù)

  • 對(duì)data對(duì)象或者數(shù)組值進(jìn)行操作,試圖數(shù)據(jù)并不會(huì)響應(yīng)
    使用$set便可以讓數(shù)據(jù)響應(yīng),
<template>
    <div class="hello">
        {{ obj }}
    </div>
</template>

<script>
export default {
    mounted() {
        for (let i = 0; i < 3; i++) {
            this.obj[i] = [1, 2, 3];
        }
    },

    data() {
        return {
            obj: {}
        };
    }
};
</script>
  • 此時(shí)對(duì)象的數(shù)據(jù)并不響應(yīng),使用$set
<template>
    <div class="hello">
        {{ obj }}
    </div>
</template>

<script>
export default {
    mounted() {
        for (let i = 0; i < 3; i++) {
            this.obj[i] = [1, 2, 3];
        }
        this.$set(this.obj, this.obj);
    },

    data() {
        return {
            obj: {}
        };
    }
};
</script>
  • 此時(shí)對(duì)象便可以動(dòng)態(tài)響應(yīng)


    image.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 概要 64學(xué)時(shí) 3.5學(xué)分 章節(jié)安排 電子商務(wù)網(wǎng)站概況 HTML5+CSS3 JavaScript Node 電子...
    阿啊阿吖丁閱讀 9,880評(píng)論 0 3
  • 1.badgeVaule氣泡提示 2.git終端命令方法> pwd查看全部 >cd>ls >之后桌面找到文件夾內(nèi)容...
    i得深刻方得S閱讀 4,987評(píng)論 1 9
  • webpack 核心 核心概述 entry 入口文件:js 代碼文件,可執(zhí)行的 node 模塊或打包的入口文件。 ...
    coolheadedY閱讀 3,614評(píng)論 1 6
  • 左先生小課堂開(kāi)課了。 從前有一個(gè)漁夫,他打完了魚(yú)在海邊悠閑的睡覺(jué)。一個(gè)旅人經(jīng)過(guò),他問(wèn)漁夫,你為什么不打魚(yú)而是在休息...
    u以后閱讀 766評(píng)論 0 0
  • 人生在世,注定要受許多委屈。而一個(gè)人越是成功,他所遭受的委屈也越多。 要使自己的生命獲得價(jià)值和炫彩,就不能太在乎委...
    大道行者_(dá)閱讀 326評(píng)論 0 0

友情鏈接更多精彩內(nèi)容