1. Preface
I believe everyone knows that a common requirement for data binding is the class list of operation elements and its inline style. Since they are all properties, we can handle them with v-bind : we just need to calculate the final string of the expression. However, string splicing is troublesome and easy to make mistakes. So Vue.js specifically enhances it when v-bind is used for class and style. The result type of an expression can be an object or an array in addition to a string.
2. Bind HTML Class
Please note: Although you can use Mustache tag to bind class, such as class="{{ className }}" , we do not recommend this writing method and v-bind:class . Only one of the two can be chosen!
Object Syntax
We can pass an object to v-bind:class to switch class dynamically. Note that v-bind:class directive can coexist with ordinary class features:
<div v-bind:class="{ 'class-a': isA, 'class-b': isB }"></div> data: { isA: true, isB: false}Rendered as:
<div></div>
When isA and isB change, the class list will be updated accordingly. For example, if isB becomes true, the class list will become " 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 that returns the object here. This is a commonly used and powerful mode.
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></div>
If you also want to switch the class in the list according to the conditions, you can use a ternary expression:
<div v-bind:class="[classA, isB ? classB : '']">
This example always adds classA, but classB only if isB is true.
2. Bind inline styles
Object Syntax
The object syntax of v-bind:style is very intuitive - it looks very similar to CSS, but it is actually a JavaScript object. CSS attribute names can be named by camelCase or short horizontal separation (kebab-case):
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div> data: { activeColor: 'red', fontSize: 30}It is usually 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 the computed properties of the returned object.
3. Array Syntax
v-bind:style 's array syntax can apply multiple style objects to one element:
<div v-bind:style="[styleObjectA, styleObjectB]">
Automatically add prefixes
When v-bind:style uses CSS attributes that require vendor prefixes, such as transform, Vue.js will automatically detect and add the corresponding prefix.
4. Summary
The above is the entire content of vue.js binding class and style styles compiled for you. The article is introduced in detail and has certain reference learning value. I hope it will be helpful to everyone to learn vue.js. The editor will also update information about vue.js one after another. Interested friends, please continue to pay attention to Wulin.com.