Vue.js 样式绑定

admin

Vue.js class

class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。

Vue.js v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。

---

class 属性绑定

我们可以为 v-bind:class 设置一个对象，从而动态的切换 class:

实例 1

实例中将 isActive 设置为 true 显示了一个绿色的 div 块，如果设置为 false 则不显示：

4 ~% \" z) T0 \; C/ `9 u0 J
6 N- k) ^& W  s

1. <div v-bind:class="{ active: isActive }"></div>

复制代码

以上实例 div class 为：
& m3 i$ z% O, ?0 @+ A7 r7 q% w

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

复制代码

我们也可以在对象中传入更多属性用来动态切换多个 class 。

实例 2

text-danger 类背景颜色覆盖了 active 类的背景色：

- `" y$ q, O: p' w+ R' J
1 B# o6 g5 r& R5 J( }, z% ~9 y

1. <div class="static"
   
2.      v-bind:class="{ active: isActive, 'text-danger': hasError }">
   ; @" _" W  ?: @6 `) f. t7 y
3. </div>

复制代码

以上实例 div class 为：
& R2 |- F3 z+ E3 D2 b/ K

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

复制代码

我们也可以直接绑定数据里的一个对象：

实例 3

text-danger 类背景颜色覆盖了 active 类的背景色：

8 B! d# h4 s. n- m' x: [  ?
- I& F2 @' i; ]+ ^& t

1. <div id="app">
   
2.   <div v-bind:class="classObject"></div>
   , \# E9 k& W0 J% Q
3. </div>

复制代码

实例 3 与 实例 2 的渲染结果是一样的。

此外，我们也可以在这里绑定返回对象的计算属性。这是一个常用且强大的模式：

实例 4
* g0 J- M8 s" g* M/ x
9 z1 p# c* N' W- c& N# |

1. new Vue({
   
2.   el: '#app',
   $ T0 @2 d6 s: J$ d$ l( }1 I0 V3 b
3.   data: {
   % L( L1 ~$ V; I2 j: v
4.   isActive: true,
   
5.   error: null
   
6.   },
   7 g% m! R( p( h/ F4 k
7.   computed: {
   6 E0 w# A' u: w' q
8.     classObject: function () {
   " E# }# X5 r7 G) n
9.       return {
   ! L. S- z) W6 Y: T9 O4 O3 |
10.         active: this.isActive && !this.error,
    7 [1 c; l4 P/ M( \* `0 _
11.         'text-danger': this.error && this.error.type === 'fatal',
    
12.       }
    
13.     }
    " |5 t$ M) \; x
14.   }
    
15. })

复制代码

数组语法

我们可以把一个数组传给 v-bind:class ，实例如下：

实例 5
: Q' _- u# _' W, h% V2 n, X

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

复制代码

以上实例 div class 为：

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

复制代码

我们还可以使用三元表达式来切换列表中的 class ：

实例 6

errorClass 是始终存在的，isActive 为 true 时添加 activeClass 类：

5 i, _7 D4 O4 q' i9 R

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

复制代码

2 Y4 x: ^/ F0 G* W" H/ e
2 A4 K% s* w# B3 o  C) ~! AVue.js style(内联样式)

我们可以在 v-bind:style 直接设置样式：

实例 7
2 ~6 F- H9 s; q
+ D, ^8 X: b5 u# ?+ r7 Y! K8 U

1. <div id="app">
   
2.     <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>
   
3. </div>

复制代码

以上实例 div style 为：
# h) P7 F  p$ a9 w

1. <div style="color: green; font-size: 30px;">菜鸟教程</div>

复制代码

也可以直接绑定到一个样式对象，让模板更清晰：

实例 8
+ m% B# o1 L2 k/ I: P3 \( m$ s) R7 f

1. <div id="app">
     c4 c4 k+ e9 S6 P7 Z
2.   <div v-bind:style="styleObject">菜鸟教程</div>
   : ~( O5 ?4 Y0 b  Z7 z" {9 q
3. </div>

复制代码

v-bind:style 可以使用数组将多个样式对象应用到一个元素上：

实例 9

1. <div id="app">
     h3 {. o( \! K- p% F5 y+ U
2.   <div v-bind:style="[baseStyles, overridingStyles]">菜鸟教程</div>
   & G& T- M8 ]  ^6 N
3. </div>

复制代码

3 [# m9 [* v4 ]& r# H! }* F
注意：当 v-bind:style 使用需要特定前缀的 CSS 属性时，如 transform ，Vue.js 会自动侦测并添加相应的前缀。

+ d# |2 V/ f2 [# i6 b# e0 X

' L# m, t6 G/ K6 ~7 Q8 \- Z! E% F
7 F. {, A" l2 C: k