vue.js dynamic style binding method

Vue.js class

Class and style are attributes of HTML elements, used to set the style of elements. We can use v-bind to set style attributes.

Vue.js v-bind has been specially enhanced when handling classes and styles. In addition to strings, the result type of an expression can also be an object or an array.

 

class attribute binding

1. Bind an object and dynamically switch classes

We can set an object for v-bind:class to dynamically switch classes:

In the example, a green div block is displayed if isActive:true is displayed, and it is not displayed if isActive:false:

<div v-bind:class="{ 'active1': isActive }"></div>

Set style actvie1:

---Set the value of isActive to true in the data object;

Page display results: 

--- Set the value of isActive in the data object to false, and it will not be displayed;

 

2. Bind multiple dynamic classes:

 The background color of the text-danger class overrides the background color of the active class:

<div class="static" v-bind:class="{ 'active': isActive ,'text-danger' : hasError }"></div>

Page loading:

<div class="static active text-danger"></div>

Effect: 

The green background of active is covered by the red background of text-danger, so the display effect is red;

 

3. Directly bind an attribute in data:

Look directly at the code:

<br>
// 动态绑定class属性classObject
<div class="static" v-bind:class="classObject"></div>


// 在data中控制active、text-danger的布尔值
export default {
  name: "AaaTest1",
  data(){
    return{
      isActive: true,
      hasError: true,
      classObject:[{
        active:true,
        'text-danger':true
      }] 
    }
  }
}

The page view is the same as Example 2;

ps: Bind the computed properties of the returned object:

data: {
    isActive: true,
    error: {
      value: false,
      type: 'fatal'
    }
  },

computed:{
    classObject(){
      return{
        isActive: this.isActive && !this.error.value, // 二者皆为真时，才能绑定改class类；
        'text-danger': this.error.value && this.error.type === 'fatal'  
      }
    }
  }

 

4. Array syntax, pass an array to v-bind:class 

如：<div v-bind:class="[activeClass, errorClass]"></div>

Use a ternary expression to switch classes in the list:

<div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>

  

View: It is a red square; at this time, errorClass, isActive, and activeClass in the array are all attributes in data :

    If the class is bound as follows:

<div class="static" v-bind:class="[errorClass ,isActive ? 'activeClass' : '']"></div>

 

View: It is a pink square; at this time, activeClass is wrapped in 'quotes', so activeClass is a class style , not a data attribute;

 

Vue.js style (inline style)

5. v-bind:style directly sets the style:

<div class="static" v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">:style样式</div>

Set in data attribute:

Page inspection elements:

View shows:

 

6. Bind directly to a style object:

<div class="static" v-bind:style="styleObject">:style样式</div>

Set in data attribute:

Page inspection element: same as Example 5;

View display: Same as Example 5;

 

7. Use an array to apply multiple style objects to an element:

<div class="static1" v-bind:style="[baseStyles, overridingStyles]">数组形式添加内联样式。</div>

Set in data attribute:

Page inspection elements:

View shows:

 Note: When  v-bind:style  uses CSS properties that require specific prefixes, such as transform, Vue.js will automatically detect and add the corresponding prefix.

 

Summary : v-bind: class  binds an object, binds multiple objects, directly binds an attribute, controls the Boolean value of the class in the data data, and binds in the form of an array (ternary operations can be performed).

v-bind:style  is set directly on the label in the form of an object, binds an object, binds multiple attributes in an array, and sets the style in the data data.