DOM elements often dynamically bind some class class class names or style styles. This chapter describes several ways to bind classes and styles using the v-bind instruction.

4.1 Understanding v-bind instructions

In Chapter 2, we have introduced the basic usage of instruction v-bind and its grammatical sugar. Its main purpose is to dynamically update attributes on HTML elements.
Recall the following examples:

 1 <div id="app">
 2     <a v-bind:href="url">Hyperlink</a>
 3     <img v-bind:src="imgUrl">
 4     <!-- Abbreviated as -->
 5     <a :href="url">Hyperlink</a>
 6     <img :src="imgUrl">
 7 </div>
 8 
 9 <script>
10     var app = new Vue({
11         el: "#app",
12         data: {
13             url: "https://www.geeksss.com",
14             imgUrl: "http://www.geeksss.com/logo.png"
15         }
16     });
17 </script>

 

The href attributes of links and src attributes of images are set dynamically, and when the data changes, they will be re-rendered.

In data binding, the two most common requirements are the element's style name class and the dynamic binding of inline style.
They are also attributes of HTML, so you can use the v-bind directive, we just need to use v-bind to calculate the final string of the expression.
However, sometimes the logic of expressions is more complex and it is difficult to read and maintain using string splicing method, so Vue.js enhances the binding of class and style.

4.2 Several ways to bind class es

4.2.1 Object Grammar

Setting an object to v-bind:class can dynamically switch classes, such as:

 1 <div id="app">
 2     <div :class="{ 'active' : isActive }"></div>
 3 </div>
 4 
 5 <script>
 6     var app = new Vue({
 7         el: "#app",
 8         data: {
 9             isActive: true
10         }
11     });
12 </script>

 

In the example above, the class name active depends on the data isActive.
When true, <div> has the class name active, but not false.
So the final rendering result of the above example is:

1 <div id="app">
2     <div class="active"></div>
3 </div>

 

Objects can also pass in multiple attributes to dynamically switch class es.
In addition, classes can coexist with ordinary classes, such as:

 1 <div id="app">
 2     <div class="static" :class="{'active':isActive, 'error':isError}"></div>
 3 </div>
 4 
 5 <script>
 6     var app = new Vue({
 7         el: "#app",
 8         data: {
 9             isActive: true,
10             isError: false
11         }
12     });
13 </script>

 

When each expression in the class is true, the corresponding class name is loaded. The result rendered above is as follows:

1 <div id="app">
2     <div class="static active"></div>
3 </div>

 

When the data isActive or isError changes, the corresponding class class class name will also be updated.
For example, when isError is true, the rendered result is:

1 <div id="app">
2     <div class="static active error"></div>
3 </div>

 

When the expression of class is too long or the logic is complex, a computational attribute can also be bound.
This is a very friendly and common usage. Generally, when there are more than two conditions, you can use data or computer.
For example, using computational attributes:

 1 <div id="app">
 2     <div :class="classes"></div>
 3 </div>
 4 
 5 <script>
 6     var app = new Vue({
 7         el: "#app",
 8         data: {
 9             isActive: true,
10             error: null
11         },
12         computed: {
13             classes: function() {
14                 return {
15                     active: this.isActive && !this.error,
16                     "text-fail": this.error && this.error.type === "fail"
17                 };
18             }
19         }
20     });
21 </script>

 

In addition to calculating attributes, you can also directly bind data of an Object type, or use methods similar to calculating attributes.

4.2.2 Array Grammar

When multiple classes need to be applied, you can use array syntax to bind an array to: class and apply a list of classes:

 1 <div id="app">
 2     <div :class="[activeCls, errorCls]"></div>
 3 </div>
 4 
 5 <script>
 6     var app = new Vue({
 7         el: "#app",
 8         data: {
 9             activeCls: "active",
10             errorCls: "error"
11         }
12     });
13 </script>

 

The rendered results are as follows:

1 <div id="app">
2     <div class="active error"></div>
3 </div>

 

You can also use ternary expressions to switch class es according to conditions, such as the following example:

 1 <div id="app">
 2     <div :class="[isActive ? activeCls : '', errorCls]"></div>
 3 </div>
 4 
 5 <script>
 6     var app = new Vue({
 7         el: "#app",
 8         data: {
 9             isActive: true,
10             activeCls: "active",
11             errorCls: "error"
12         }
13     });
14 </script>

 

Style error s are always applied, and when the data isActive is true, the Style active is applied.

When class es have multiple conditions, it's tedious to write this way, and object grammar can be used in arrays:

 1 <div id="app">
 2     <div :class="[{'isActive':isActive}, errorCls]"></div>
 3 </div>
 4 
 5 <script>
 6     var app = new Vue({
 7         el: "#app",
 8         data: {
 9             isActive: true,
10             errorCls: "error"
11         }
12     });
13 </script>

 

Of course, as with object grammar, you can also use data, computed and methods.
Take computational attributes as an example:

 1 <div id="app">
 2     <button :class="classes">Button</button>
 3 </div>
 4 
 5 <script>
 6     var app = new Vue({
 7         el: "#app",
 8         data: {
 9             size: "large",
10             disabled: true
11         },
12         computed: {
13             classes: function() {
14                 return [
15                     "btn",
16                     {
17                         ["btn-" + this.size]: this.size !== "",
18                         ["btn-disabled"]: this.disabled
19                     }
20                 ];
21             }
22         }
23     });
24 </script>

 

The style BTN in the example is always applied. When the data size is not empty, the style prefix btn-, followed by the value of size, is applied.
When the data disabled is true, the style btn-disabled is applied.
So the final rendering result of this example is:

1 <div id="app">
2     <button class="btn btn-large btn-disabled">Button</button>
3 </div>

 

Using computational attributes to dynamically set class names for elements is often used in business, especially when writing reusable components.
Therefore, in the development process, if the expression is long or the logic is complex, the computational attributes should be given priority as far as possible.

4.2.3 Used on Components

If you use class or: class directly on a custom component, style rules will be applied directly to the root element of the component.
For example, declare a simple component:

1 Vue.component("my-component", {
2     template: "<p class='article'>Some texts</p>"
3 });

 

Then, when calling this component, apply the object or array syntax described in the previous two sections to bind the class to the component.
Take object grammar as an example:

 1 <div id="app">
 2     <my-component :class="{'active':isActive}"></my-component>
 3 </div>
 4 
 5 <script>
 6     var app = new Vue({
 7         el: "#app",
 8         data: {
 9             isActive: true
10         }
11     });
12 </script>

 

The final rendering result of the component is as follows:

1 <div id="app">
2     <p class="article active">Some texts</p>
3 </div>

 

This usage applies only to the outermost layer of a custom component, which is a root element, otherwise it will be invalid.
When this condition is not satisfied or a class name needs to be set for a specific child element, props of the component should be used to pass it.
These usages also apply to the content of the binding inline style in the next section.

4.3 Binding Inline Styles

Inline styles can be bound to elements using v-bind: style.
Similar to: class, there are object grammar and array grammar, which look like writing CSS directly on elements:

 1 <div id="app">
 2     <div :style="{ 'color':color, 'fontSize':fontSize+'px' }">text</div>
 3 </div>
 4 
 5 <script>
 6     var app = new Vue({
 7         el: "#app",
 8         data: {
 9             color: "red",
10             fontSize: 14
11         }
12     });
13 </script>

 

CSS attribute names use camelCase and kebab-case.
The rendered results are as follows:

1 <div id="app">
2     <div style="color: red; font-size: 14px;">text</div>
3 </div>

 

In most cases, writing a long list of styles directly is not easy to read and maintain, so it is usually written in data or computer.
Take data as an example to rewrite the above example:

 1 <div id="app">
 2     <div :style="styles">text</div>
 3 </div>
 4 
 5 <script>
 6     var app = new Vue({
 7         el: "#app",
 8         data: {
 9             styles: {
10                 color: "red",
11                 fontSize: 14 + "px",
12             }
13         }
14     });
15 </script>

 

When applying multiple style objects, you can use array syntax:

1 <div :style="[styleA, styleB]">text</div>

 

In practical business, the array syntax of: style is not commonly used, because it can be written in an object, and the more commonly used should be computing attributes.

In addition, when using: style, Vue.js automatically prefixes special CSS attribute names, such as transform.