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

This article mainly introduces "how Vue.js binds class attributes". In daily operations, I believe many people have doubts about how Vue.js binds class attributes. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubts about "how to bind class attributes in Vue.js". Next, please follow the editor to study!

First, the "" is the object that exists in the vue object

: class = "statement". The variables established by vue are passed in the statement. When calculating attributes, functions, etc., the value of the corresponding object in vue will be replaced with the value of class. If the string''is passed in, it is directly used as the value of the class attribute.

In this case, a class value cannot be bound, and the value of the class property can only be changed by modifying the value of the bound class variable.

Code example:

.active {

Color:red

}

{{c1}}

Const app = new Vue ({

El: "# app"

Data: {

C1: "active"

}

})

2. Inside "is an array of []."

When we want to bind multiple class attribute values, we can pass in the [] array in ". The value in the array is the name of the object variable in vue. If there is a'', then the actual value is passed in and will not be replaced.

Code example:

.active {

Color:red

}

.font {

Background-color:blue

}

{{c1}}

Const app = new Vue ({

El: "# app"

Data: {

C1: "active"

C2: "font"

}

})

Page effect: obviously the tag attribute will be class= "active font c3"

3. There is a {} json object in "

When we want to bind multiple class attribute values, each class property value we set is already given. You can set the bound property value to decide whether you want it or not, for example, class= "N1 N2". We can set it to class= "N1" through vue, but not to class= "n3" directly through vue.

We're going to use {} objects to express it. Only a value of type boolean corresponding to each set class attribute value determines whether the tag has the attribute value, but the corresponding Boolean value is true to assign a value to the class attribute.

The format is:

The format of this type is: class = "{N1: b1, N2: b2}"

Note:

/ / b1memb2 is a boolean type.

/ / N1 Magi N2 is no longer replaced by vue objects, it is plain text! Whether you add "" or not, as mentioned above, assume b1 = true, b2=true. When the page is rendered, the tag attribute class = "N1 N2"

Code demonstration:

.active {

Color:red

}

.font {

Background-color:blue

}

{{c1}}

Const app = new Vue ({

El: "# app"

Data: {

C1: "active"

C2: "font"

IsTrue1:true

IsTrue2:false

}

})

Page effect: sure enough, active,font in class= "{active:isTrue1,font:isTrue2}" is not replaced by vue, but directly as the value of the class attribute!

At this point, the study on "how Vue.js binds class properties" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.