In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-03-16 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >
Share
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.
Views: 0
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.