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

The knowledge of this article "how to add attributes to the variables in data in vue" is not understood by most people, so the editor summarizes the following, detailed contents, clear steps, and a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to add attributes to variables in data in vue" article.

Adding attributes to variables in data the vue framework uses mvvm mode

There is a notification mechanism that will be updated through the view if the data changes.

Is that so? as long as we change the value in data in vue, the dom tree will be updated at any time.

{{val}} add a new attribute var app=new Vue ({el: "# app", data: {test: {"a": 'test.a' }) console.log (app.test.a) / / access to app.test.a= "test.b"; console.log (app.test.a); / / print out test.b while the view has changed

It is possible for us to access variables outside the instance of vue.

You can access the printed test.a directly from app.test.a.

What if we just change it here?

App.test.a= "test.b"

You will find that the view has changed.

But if we add attributes to app.test here and see if it's okay.

App.test.b= "test.c"; console.log (app.test.b)

Finally, it is found that test.c is indeed added to the page, which is the power of vue responsive data.

So let's try to see if direct assignment can add attributes from the vue instance.

Methods: {add:function () {this.test.b= "test.c"; console.log (this.test);}}

I created a button on the interface and added an add method to see if I could add new properties through method calls.

The print does appear in the data data of vue, but it is not actually updated in the view.

Students who know about vue may know that data two-way binding of vue combines subscribers through data hijacking-- the popular point of the publisher is that the attribute that we added directly later is not in the notification mechanism of vue, so we can't enjoy the real-time monitoring mechanism.

But at work, we may need to add some data to our network and let it and the view update in real time.

I won't talk more nonsense and go straight to the method.

1. Operate through an array

This.test.push ({isActive:fasle})

two。 Through the global api $set

This.$set (this.test, "isActive", fasle)

3. Through Object.assign ()

This.test=Object.assign ({}, this.test, {"b": "test.c"})

The first method is that I can add it myself and can use it under special circumstances in No. 1 Middle School.

Dynamically add attributes to responsive objects in data

Data responsive object dynamically add attributes

Name: {{peple.name}} Click to add gender gender: {{peple.sex}} export default {data () {return {peple: {name: "grow up"}};}, methods: {setSex () {this.$set (this.peple, "sex", "male");}

The above is about the content of this article on "how to add attributes to variables in data in vue". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more related knowledge, please pay attention to the industry information channel.

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.