Class and style binding that you must learn every day in Vue.js-JS Tutorial-php.cn

A common requirement for data binding is to manipulate the element's class list and its inline styles. Since they are both attributes, 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 used with classes and styles. In addition to strings, the result type of an expression can also be an object or an array.

Binding HTML Class

Although you can use Mustache tags to bind classes, such as `{% raw %}class=”{{ className }}”{% endraw %}`, but we It is not recommended to mix this writing method 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
}

Copy after login

Rendered as:

When isA and isB change, the class list will be updated accordingly. 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: {
 &#39;class-a&#39;: true,
 &#39;class-b&#39;: false
 }
}

Copy after login

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: &#39;class-a&#39;,
 classB: &#39;class-b&#39;
}

Copy after login

Rendered as:

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

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

However, it is a bit cumbersome to write like this when there are multiple conditional classes. In 1.0.19+, you can use object syntax within array syntax:

Bind inline style

Object syntax

The object syntax of v-bind:style is very intuitive - it looks very like CSS, but in fact it is 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: &#39;red&#39;,
 fontSize: 30
}

Copy after login

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

<div v-bind:style="styleObject"></div>
 
data: {
 styleObject: {
 color: &#39;red&#39;,
 fontSize: &#39;13px&#39;
 }
}

Copy after login

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

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 CSS properties that require vendor prefixes, such as transform, Vue.js will automatically detect and add the corresponding prefix.

The above is the entire content of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support the PHP Chinese website.

For more articles related to Class and style binding that you must learn every day in Vue.js, please pay attention to the PHP Chinese website!

Related labels：

Vue.js Class 样式绑定

source：php.cn

Previous article：Vue.js must learn two-way data binding every day Next article：vue.js introductory tutorial binding class and style styles

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn