Vue.set的使用

時間 2019-11-18

標籤 vue.set vue set 使用简体版

原文原文鏈接

這裏我定義了一個列表數據，我將經過三個不一樣的按鈕來控制列表數據。html

首先在列表中動態新增一條數據：vue

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app2">
<!--想了解這裏key的做用請訪問：(https://cn.vuejs.org/v2/api/#key)-->
    <p v-for="item in items" :key="item.id">
        {{item.message}}
    </p>
    <!--@click等價於v-on:click-->
    <button class="btn" @click="btn1Click()">點我試試</button><br/>
</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:{
            btn1Click:function(){
                this.items.push({message:"動態新增"});//爲data中的items動態新增一條數據
            }
        }
    });
</script>
</body>
</html>

這是我點擊以前的列表：api

點擊以後列表新增了一條數據：數組

經過數組的變異方法（Vue數組變異方法）咱們能夠動態控制數據的增減，可是咱們卻沒法作到對某一條數據的修改。這時候就須要Vue的內置方法來幫忙了~app

Vue.set() 響應式新增與修改數據
此時咱們須要知道Vue.set()須要哪些參數，官方API：Vue.set()this

調用方法：Vue.set( target, key, value )spa

target：要更改的數據源(能夠是對象或者數組)code

key：要更改的具體數據htm

value ：從新賦的值對象

咱們依然用上面列表舉例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app2">
    <p v-for="item in items" :key="item.id">
        {{item.message}}
    </p>
    <button class="btn" @click="btn2Click()">動態賦值</button><br/><br/>
    <button class="btn" @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 methods中的this 指向的是Vue的實例，這裏能夠直接在this中找到items
                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>

此時頁面是這樣

我點擊第一個按鈕後運行methods中的btn2Clcick方法，此時我要將Test one更改成Change Test

運行後的結果：此時列表中第一列的Test one已經變成了Change Test

這裏得警戒一種狀況：
當寫慣了JS以後，有可能我會想改數組中某個下標的中的數據我直接this.items[XX]就改了，如：

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

咱們來看看結果：

這種狀況，是Vue文檔中明確指出的注意事項，因爲 JavaScript 的限制，Vue 不能檢測出數據的改變，因此當咱們須要動態改變數據的時候，Vue.set()徹底能夠知足咱們的需求。

仔細看的同窗會問了，這不是還有一個按鈕嗎，有什麼用？

咱們仍是直接看：

這是初始的列表數據，數據裏面有三個對象

點擊以後：

這裏能夠看出，Vue.set()不光能修改數據，還能添加數據，彌補了Vue數組變異方法的不足

Tip:Vue.set()在methods中也能夠寫成this.$set()

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。