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

This article will explain in detail how to use the class style in Vue. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Vue provides us with several ways to use the style of the class class

1. Boolean value

Let's normally write a style named active in the style tag.

.active {color: red; font-size: 20px; font-style: normal;}

Create a vm instance in our script tag and write isActive:true in the data data center of the instance

True means to use this style, while false means not to use it

Let vm = new Vue ({el:'#app', data: {isActive:true})

At this point we have v-bind instructions in the tag to use the class class

I am using a Boolean value to reference the class style

View the output:

Now let's change true to false:

Data: {isActive: false}

View the output:

two。 Expression.

We can add an expression after the v-bind: directive, and call the class class when the condition is met

For example, we have an array of objects in the data center data and render it to the view layer. I want the index to be an even number of references.

Class class style:

{{index}}-{{item.name}} let vm = new Vue ({el: "# app", data: {list: [{id:1,name: "Jinks"}, {id:2,name: "Jess"}, {id:3 Name: "Catelyn"}, {id:4,name: "Wei"},]}})

Use attributes to bind the class class style in li:

{{index}}-{{item.name}}

The output is as follows:

We can also define a mark in the data center to have a row reference the class class separately by defining the value of mark

{{index}}-{{item.name}} let vm = new Vue ({el: "# app", data: {list: [{id:1,name: "Jinks"}, {id:2,name: "Jess"}, {id:3,name: "Catelyn"} {id:4,name: "Wei"},], mark:0}})

At this point, only the style with an index of 0 is referenced, that is, the first:

3. Multi-class encapsulation

Multiple classes can be encapsulated directly into the object, and the object name can be called directly in the view layer!

Multiple classes, which can be placed in an object, which is an object name in the view layer and an object in the data center data. Multiple classes are listed in the object.

.f50 {font-size: 50px;} .blue {color: blue;} .background {background-color: black;} Chinese

Let vm = new Vue ({el: "# app", data: {classObject: {"f50": true, "blue": true, "background": true})

The output is as follows:

You can also customize the calculation property, encapsulate it in the function, and call the

Let vm = new Vue ({el: "# app", computed: {/ / 1. Custom calculation property name, / / 2. Calculate what the attribute does, and we encapsulate it in the function myclass () {return {"f50": true, "blue": true, "background": true}) Chinese

The output results are consistent.

4. You can use the class class .f50 {font-size: 50px;} .blue {color: blue;} .background {background-color: black;} week after week using the array form directly in v-bind:

Output result:

This is the end of this article on "how to use class style in Vue". 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.