這裏我定義了一個列表數據，我將通過三個不同的按鈕來控制列表數據。
首先在列表中動態新增一條數據：
<!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>
這是我點擊之前的列表：
這裏寫圖片描述
點擊之後列表新增了一條數據：
這裏寫圖片描述
通過數組的變異方法（Vue數組變異方法）我們可以動態控制數據的增減，但是我們卻無法做到對某一條數據的修改。這時候就需要Vue的內置方法來幫忙了~
Vue.set() 響應式新增與修改數據
此時我們需要知道Vue.set()需要哪些參數，官方API：Vue.set()
調用方法：Vue.set( target, key, value )
target：要更改的數據源(可以是對象或者數組)
key：要更改的具體數據
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()
作者：洛禾sunshime
鏈接：https://www.jianshu.com/p/c39d1c670d49
來源：簡書
著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。