Implementation method of Vue style binding

When learning Vue, I think style binding is very simple, but I always feel like it is easy to make myself confused when I use it. Because the array syntax and object syntax in :class and :style are different from the values ​​bound in data. This article briefly summarizes Vue binding.

The class list and inline style of operation elements are a common requirement for data binding. Because they are all attributes, they can be processed by v-bind and the string result can be calculated through expressions. However, string splicing is troublesome and easy to make mistakes. Therefore, when using v-bind for class and style, Vue has made special enhancements. In addition to strings, expression result types are also objects or arrays.

• Class binding
• Style binding

Bind Class

Object Syntax

The attribute in data is responsible for whether toggle wants this class, which is the value that generally defines the Boolean type.

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

Here is Active and hasError to define whether active and text-danger classes are required.

data: {
 isActive: true,
 hasError: false
}

Rendered as

<div class="active"></div>

Array Syntax

Data is responsible for defining the CSS class name.

<div :class="[activeClass, errorClass]"></div>

The CSS class names that define activeClass and errorClass are active and text-danger.

data: {
 activeClass: 'active',
 errorClass: 'text-danger'
}

Rendered as

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

Mixed writing

Class can be bound in a mixed form, that is, object syntax is written in array syntax. Therefore, the data in data is mainly used for:

1. Is there a class required?
2. Define the class name in "class"

<div :class="[{ active: isActive }, errorClass]"></div>

Here the CSS class name of errorClass is defined as text-danger, and isActive defines whether an active class is needed.

data: {
 errorClass: 'text-danger',
 isActive: true
}

Rendered as

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

Bind Style

Object Syntax

The attribute in data defines the value in style. Unlike class, class defines whether to want this class.

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

Here the values ​​of color and font-size in style are defined.

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

Rendered as

<div style="color: red; font-size: 30px"></div>

Array Syntax

Multiple style objects can be bound to style

<div :style="[baseStyles, overridingStyles]"></div>

Here, in data, color and font-size are defined using styleObject, and then background and margin are defined using overridingStyles. Then use arrays to perform mixed binding in the component.

data: {
 styleObject: {
  color: 'red',
  fontSize: '13px'
 },
 overridingStyles: {
  background: 'green',
  margin: '13px'
 }
}

Rendered as

<div style="color: red; font-size: 13px; background: green; margin: 13px;"></div>

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.