Shulou(Shulou.com)06/01 Report--

This article will explain in detail how Vue uses $set and $delete to manipulate object properties. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

1. $set

Before we start to explain $set, take a look at the following code to achieve the function: when you click the "add" button, dynamically add properties and values to the objects in the data. The code example is as follows:

Add attribute _ window.onload=function () {new Vue ({el:'#app',// 2.0 does not allow mounting to html,body elements data: {info: {id:1,price:15,name: "package A"}} Methods: {add:function () {/ / add a msg attribute to the info object and assign the value this.info.msg= "hello" });} {{info.msg}} add

Take a look at the effect before you click the button:

You can see from the screenshot that the info object has only three attributes. Click the "add" button to refresh, and then take a look at the properties of the info object. The screenshot is as follows:

You can see that the msg property is added to the info object, but the value of the msg property is not displayed on the interface. That is:

If a new property is added to the instance after the instance is created, the view update is not triggered.

At this point, you need to use $set. The code example is as follows:

Add attribute _ window.onload=function () {new Vue ({el:'#app',// 2.0 does not allow mounting to html,body elements data: {info: {id:1,price:15,name: "package A"}} Methods: {add:function () {/ / add a msg attribute to the info object and assign / / this.info.msg= "hello" This.$set (this.info, "msg", "hello");});} {{info.msg}} add

Effect:

You can see that the view is updated after using $set.

Note: if you are modifying an attribute that already exists in the object, you can modify it directly.

The code example is as follows:

Add attribute _ window.onload=function () {new Vue ({el:'#app',// 2.0 does not allow mounting to html,body elements data: {info: {id:1,price:15,name: "package A"}} Methods: {add:function () {/ / add a msg attribute to the info object and assign / / this.info.msg= "hello" This.$set (this.info, "msg", "hello");}, modify:function () {this.info.name= package B;}) } {{info.msg}} name value: {{info.name}} add and modify

Effect:

2. $delete deletes object attributes

You can use $delete to delete attributes in an object. The code example is as follows:

Add attribute _ window.onload=function () {new Vue ({el:'#app',// 2.0 does not allow mounting to html,body elements data: {info: {id:1,price:15,name: "package A"}} Methods: {add:function () {/ / add a msg attribute to the info object and assign / / this.info.msg= "hello" This.$set (this.info, "msg", "hello");}, modify:function () {this.info.name= package B }, del:function () {/ / delete the price property this.$delete (this.info, "price") in the info object;}) } {{info.msg}} name value: {{info.name}} add, modify and delete

Effect:

This is the end of this article on "how Vue uses $set and $delete to manipulate object properties". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.