溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

vue中vue.set有哪些參數(shù)

發(fā)布時(shí)間：2020-12-16 10:07:39 來(lái)源：億速云 閱讀：682 作者：小新 欄目：編程語(yǔ)言

這篇文章將為大家詳細(xì)講解有關(guān)vue中vue.set有哪些參數(shù)，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

vue中vue.set有3個(gè)參數(shù)，分別是：1、target，表示要更改的數(shù)據(jù)源；2、key，表示要更改的具體數(shù)據(jù)；3、value，表示重新賦的值。

Vue.set()

Vue.set( target, key, value )

參數(shù)：

  • target：要更改的數(shù)據(jù)源(可以是對(duì)象或者數(shù)組)

  • key：要更改的具體數(shù)據(jù)

  • value ：重新賦的值

官方API：Vue.set()

Vue.set的使用

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app2">
    <p v-for="item in items" :key="item.id">
        {{item.message}}
    </p>
    <button @click="btn2Click()">動(dòng)態(tài)賦值</button><br/>    
    <button @click="btn3Click()">為data新增屬性</button>
</div>
<script src="../../dist/vue.min.js"></script>
<script>
var vm2=new Vue({
    el:"#app2",
    data:{
        items:[
            {message:"Test one",id:"1"},
            {message:"Test two",id:"2"},
            {message:"Test three",id:"3"}
        ]
    },
    methods:{
        btn2Click:function(){
            Vue.set(this.items,0,{message:"Change Test",id:'10'})
        },
        btn3Click:function(){
            var itemLen=this.items.length;
            Vue.set(this.items,itemLen,{message:"Test add attr",id:itemLen});
        }
    }
});
</script>
</body>
</html>

此時(shí)頁(yè)面是這樣

vue中vue.set有哪些參數(shù)

我點(diǎn)擊第一個(gè)按鈕后運(yùn)行methods中的btn2Clcick方法，此時(shí)我要將Test one更改為Change Test

vue中vue.set有哪些參數(shù)

運(yùn)行后的結(jié)果：此時(shí)列表中第一列的Test one已經(jīng)變成了Change Test

vue中vue.set有哪些參數(shù)

這里得警惕一種情況：

當(dāng)寫(xiě)慣了JS之后，有可能我會(huì)想改數(shù)組中某個(gè)下標(biāo)的中的數(shù)據(jù)我直接this.items[XX]就改了，如：

btn2Click:function(){
  this.items[0]={message:"Change Test",id:'10'}
}

我們來(lái)看看結(jié)果：

vue中vue.set有哪些參數(shù)

這種情況，是Vue文檔中明確指出的注意事項(xiàng)，由于 JavaScript 的限制，Vue 不能檢測(cè)出數(shù)據(jù)的改變，所以當(dāng)我們需要?jiǎng)討B(tài)改變數(shù)據(jù)的時(shí)候，Vue.set()完全可以滿足我們的需求。

仔細(xì)看的同學(xué)會(huì)問(wèn)了，這不是還有一個(gè)按鈕嗎，有什么用？

我們還是直接看：

vue中vue.set有哪些參數(shù)

這是初始的列表數(shù)據(jù)，數(shù)據(jù)里面有三個(gè)對(duì)象

點(diǎn)擊之后：

vue中vue.set有哪些參數(shù)

這里可以看出，Vue.set()不光能修改數(shù)據(jù)，還能添加數(shù)據(jù)，彌補(bǔ)了Vue數(shù)組變異方法的不足

Tip:Vue.set()在methods中也可以寫(xiě)成this.$set()

關(guān)于vue中vue.set有哪些參數(shù)就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手