vue.js introductory tutorial binding class and style styles

1. Preface

I believe everyone knows that a common requirement for data binding is to operate the class list of elements and its inline styles. Since they are all properties, we can use v-bind to handle them: we just need to evaluate the final string of the expression. However, string concatenation is cumbersome and error-prone. Therefore, Vue.js specifically enhances v-bind when it is used for class and style. In addition to strings, the result type of an expression can also be an object or an array.

2. Bind HTML Class

Please note: Although you can use Mustache tags to bind classes, such as class="{{ className }}", we do not recommend this The writing method is mixed with v-bind:class. You can only choose one of the two!

Object syntax

We can pass v-bind:class an object to dynamically switch classes. Note that the v-bind:class directive can coexist with the normal class attribute:

<div class="static" v-bind:class="{ &#39;class-a&#39;: isA, &#39;class-b&#39;: isB }"></div>

data: {
 isA: true,
 isB: false
}

is rendered as:

<div class="static class-a"></div>

When isA and isB change, the class list will be changed accordingly renew. For example, if isB becomes true, the class list becomes "static class-a class-b".

You can also directly bind an object in the data:

<div v-bind:class="classObject"></div>

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

We can also bind a computed property of the returned object here. This is a commonly used and powerful pattern.

Array syntax

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

<div v-bind:class="[classA, classB]">

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

Rendered as:

<div class="class-a class-b"></div>

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

<div v-bind:class="[classA, isB ? classB : &#39;&#39;]">

This example always adds classA, but only adds classB if isB is true.

2. Bind inline style

Object syntax

The object syntax of v-bind:style is very intuitive - look at it Much like CSS, it's actually a JavaScript object. CSS property names can be camelCase or kebab-case:

<div v-bind:style="{ color: activeColor, fontSize: fontSize + &#39;px&#39; }"></div>

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

It is often better to bind directly to a style object, making the template clearer:

<div v-bind:style="styleObject"></div>

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

Similarly, object syntax is often used in conjunction with computed properties that return objects.

3. Array syntax

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

<div v-bind:style="[styleObjectA, styleObjectB]">

Automatically add prefix

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

4. Summary

The above is all the content of vue.js binding class and style styles compiled for everyone. The article introduces it in detail and has certain reference and learning value. I hope it will be helpful to everyone. Learning vue.js can be helpful. The editor will continue to update information about vue.js. Interested friends please continue to pay attention to the php Chinese website.

For more articles related to vue.js introductory tutorial on binding classes and styles, please pay attention to the PHP Chinese website!