Getting started with vue. js: Binding class and style styles

I previously introduced the computing attributes through vue. js. Do you know what you have learned. In this article, we will learn how to bind the class and style styles in vue. js. If you need them, you can refer to them for reference. I. Preface

I believe everyone knows that a common requirement for data binding is the class list of operation elements and its inline style. Because they are all attributes, 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.

Ii. Bind HTML Class

Note: although you can use the Mustache label to bind a class, for example, class = "{className}", we do not recommend using this write 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.

Ii. Bind inline styles

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.

3. 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.

Iv. Summary

The above is the vue. js binds all the content of the class and style styles. This article is very detailed and has some reference and learning value. I hope to learn vue for everyone. js can be helpful. The mini-editor will also update vue in succession. js information. If you are interested, continue to follow the first PHP community.

For more articles about binding class and style styles to the vue. js getting started tutorial, please follow the PHP Chinese network!