一、$set
在開始講解$set之前先看下面的一段代碼，實現的功能：當點擊“添加”按鈕時，動態的給data里面的對象添加屬性和值，代碼示例如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>添加屬性</title> <!--引入vue.js--> <script src="node_modules/vue/dist/vue.js" ></script> <script> window.onload=function(){ new Vue({ el:'#app',// 2.0不允許掛載到html,body元素上 data:{ info:{id:1,price:15,name:"套餐A"} }, methods:{ add:function(){ // 給info對象添加msg屬性並賦值 this.info.msg="hello"; } } }); } </script> </head> <body> <div id="app"> {{info.msg}} <button @click="add">添加</button> </div> </body> </html>
先看看點擊按鈕之前的效果：
從截圖中可以看出這時info對象只有三個屬性，點擊“添加”按鈕刷新，然后在看看info對象的屬性，截圖如下：
可以看出這時info對象增加了msg屬性，但是界面上面沒有顯示出來msg屬性的值。即：
如果在實例創建之后添加新的屬性到實例上，不會觸發視圖更新。
這時就需要使用$set了。代碼示例如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>添加屬性</title> <!--引入vue.js--> <script src="node_modules/vue/dist/vue.js" ></script> <script> window.onload=function(){ new Vue({ el:'#app',// 2.0不允許掛載到html,body元素上 data:{ info:{id:1,price:15,name:"套餐A"} }, methods:{ add:function(){ // 給info對象添加msg屬性並賦值 //this.info.msg="hello"; this.$set(this.info,"msg","hello"); } } }); } </script> </head> <body> <div id="app"> {{info.msg}} <button @click="add">添加</button> </div> </body> </html>
效果：
可以看出：使用了$set之后視圖會被更新。
注意：如果是修改對象里面已經存在的屬性，則直接修改即可
代碼示例如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>添加屬性</title> <!--引入vue.js--> <script src="node_modules/vue/dist/vue.js" ></script> <script> window.onload=function(){ new Vue({ el:'#app',// 2.0不允許掛載到html,body元素上 data:{ info:{id:1,price:15,name:"套餐A"} }, methods:{ add:function(){ // 給info對象添加msg屬性並賦值 //this.info.msg="hello"; this.$set(this.info,"msg","hello"); }, modify:function(){ this.info.name="套餐B"; } } }); } </script> </head> <body> <div id="app"> {{info.msg}} name值：{{info.name}} <button @click="add">添加</button> <button @click="modify">修改</button> </div> </body> </html>
效果：
二、$delete刪除對象屬性
可以使用$delete刪除對象里面的屬性，代碼示例如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>添加屬性</title> <!--引入vue.js--> <script src="node_modules/vue/dist/vue.js" ></script> <script> window.onload=function(){ new Vue({ el:'#app',// 2.0不允許掛載到html,body元素上 data:{ info:{id:1,price:15,name:"套餐A"} }, methods:{ add:function(){ // 給info對象添加msg屬性並賦值 //this.info.msg="hello"; this.$set(this.info,"msg","hello"); }, modify:function(){ this.info.name="套餐B"; }, del:function(){ // 刪除info對象里面的price屬性 this.$delete(this.info,"price"); } } }); } </script> </head> <body> <div id="app"> {{info.msg}} name值：{{info.name}} <button @click="add">添加</button> <button @click="modify">修改</button> <button @click="del">刪除</button> </div> </body> </html>
效果：
