vue中vue.set有哪些參數(shù)-創(chuàng)新互聯(lián)

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

10年的上高網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。成都全網(wǎng)營(yíng)銷的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整上高建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)從事“上高網(wǎng)站設(shè)計(jì)”,“上高網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

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)寫慣了JS之后，有可能我會(huì)想改數(shù)組中某個(gè)下標(biāo)的中的數(shù)據(jù)我直接this.items[XX]就改了，如：

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

我們來看看結(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ì)問了，這不是還有一個(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中也可以寫成this.$set()

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

文章標(biāo)題：vue中vue.set有哪些參數(shù)-創(chuàng)新互聯(lián)
當(dāng)前地址：http://muchs.cn/article46/dsjohg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、虛擬主機(jī)、全網(wǎng)營(yíng)銷推廣、網(wǎng)站改版、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站營(yíng)銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

成都app開發(fā)公司