Vue. js requires Class and style binding every day

This article describes Vue in detail. js Class and style binding have a certain reference value. Interested friends can refer to a common requirement for Data Binding: the class list of operation elements and its inline style. Because they are all attribute, we can use v-bind to process them: we only need to calculate the final string of the expression. However, String concatenation is troublesome and error-prone. Therefore, when v-bind is used for class and style, Vue. js specifically enhances it. The expression result type can be an object or an array in addition to a string.

Bind HTML Class

Although you can use the Mustache label to bind a class, for example, '{% raw %} class = "{className}" {% endraw % }', however, we do not recommend this writing method and 'v-bind: class. You can select either of them!

Object syntax

We can pass the v-bind: class Object to dynamically switch the class. Note that the v-bind: class command can coexist with common class features:

 data: { isA: true, isB: false}

Rendering:

When isA and isB change, the class list is updated accordingly. For example, if isB changes to true, the class list will change to "static class-a class-B ".

You can also bind an object in the data directly:

 data: { classObject: { 'class-a': true, 'class-b': false }}

We can also bind a computing attribute of the returned object here. This is a common and powerful mode.

Array syntax

We can pass an array to v-bind: class to apply a class list:

 data: { classA: 'class-a', classB: 'class-b'}

Rendering:

If you want to switch the class in the list based on the conditions, you can use a ternary expression:

In this example, classA is always added, but classB is added only when isB is true.

However, when there are multiple conditional classes, it is cumbersome to write such statements. In 1.0.19 +, you can use the object syntax in array Syntax:

Bind inline Style

Object syntax

V-bind: The style object syntax is very intuitive-It looks very like CSS, but it is actually a JavaScript Object. The CSS attribute names can be separated by camelCase or kebab-case ):

 data: { activeColor: 'red', fontSize: 30}

It is usually better to bind a style object directly to make the template clearer:

 data: { styleObject: { color: 'red', fontSize: '13px' }}

Similarly, the object syntax is often used in combination with the computing attribute of the returned object.

Array syntax

The array Syntax of v-bind: style can apply multiple style objects to one element:

Automatically add prefix

When v-bind: style uses the CSS attribute that requires the vendor prefix, such as transform and Vue. js will automatically detect and add the corresponding prefix.

The above is all of the content in this article. I hope it will be helpful for everyone's learning and support for PHP's Chinese Web.

For more articles about binding classes and styles required by Vue. js every day, please follow the PHP Chinese network!