% W2 p5 |, ]5 T1 |$ U# I5 L( o4 ]Vue.js classclass 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性。 Vue.js v-bind 在处理 class 和 style 时, 专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组。 class 属性绑定我们可以为 v-bind:class 设置一个对象,从而动态的切换 class: 实例 1实例中将 isActive 设置为 true 显示了一个绿色的 div 块,如果设置为 false 则不显示: ! O" u, @$ U* S8 X
9 B2 Z2 Y9 l( F; F7 e7 V4 q
- <div v-bind:class="{ active: isActive }"></div>
复制代码 以上实例 div class 为:8 [/ W! Y# f: F" h7 J! U5 [
- <div class="active"></div>
复制代码我们也可以在对象中传入更多属性用来动态切换多个 class 。 实例 2text-danger 类背景颜色覆盖了 active 类的背景色: - |) P8 `. M2 ?8 v- C
, `1 H2 D% i7 W: y' ?, J1 b5 h
- <div class="static"! `2 k+ L2 O/ J3 m
- v-bind:class="{ active: isActive, 'text-danger': hasError }">9 W3 s0 H6 P4 F
- </div>
复制代码 以上实例 div class 为:+ n5 b) @9 H3 }% K9 x
- <div class="static active text-danger"></div>
复制代码我们也可以直接绑定数据里的一个对象: 实例 3text-danger 类背景颜色覆盖了 active 类的背景色: " x, L$ m, J4 {5 ? M
/ v+ }0 C2 u+ `5 k* T9 Q- <div id="app">4 g( n: h( g9 Y9 A7 y
- <div v-bind:class="classObject"></div>2 n3 g( R- \ m X
- </div>
复制代码实例 3 与 实例 2 的渲染结果是一样的。 此外,我们也可以在这里绑定返回对象的计算属性。这是一个常用且强大的模式: 实例 4 Z) x3 |1 Z# |. q& @
. z. O; y! V6 U+ ^5 L: N( a" b. m
- new Vue({
g0 o$ w! F0 I0 Y- c - el: '#app',; `4 t; U E6 Q" J0 E; p
- data: {
9 I3 v( h5 J9 ^, A/ y3 Z - isActive: true,; d, a) ], u+ {7 Q( H1 m
- error: null/ f3 }: o* j: n' A
- },
3 W) C+ m% o2 k - computed: {
! `, U% l2 S1 U5 o* j6 W0 { - classObject: function () { p& A3 Q L0 v: F
- return {
4 r9 e6 g' Y/ K - active: this.isActive && !this.error,
2 v" s0 I5 `+ e$ W* L - 'text-danger': this.error && this.error.type === 'fatal',
! l2 D2 d7 |! c9 f- N5 t4 F - }
$ e, K) } W+ M( E - }
; H6 C: Q, y( J1 r - }9 b& k+ ~2 P/ a y' f: x6 H
- })
复制代码 数组语法我们可以把一个数组传给 v-bind:class ,实例如下: 实例 56 x# A1 i5 T5 N8 j! T' `7 y
" b& @4 W3 G3 T* p- <div v-bind:class="[activeClass, errorClass]"></div>
复制代码 以上实例 div class 为:
7 A3 V5 l0 y' o: [- <div class="active text-danger"></div>
复制代码我们还可以使用三元表达式来切换列表中的 class : 实例 6errorClass 是始终存在的,isActive 为 true 时添加 activeClass 类:
- a! z3 I2 h: \4 g" M
5 z- |1 S% U8 @, ?- <div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
复制代码
' h4 \6 q1 O7 r% d/ a
2 p6 W9 V# X% k0 T) ?Vue.js style(内联样式)我们可以在 v-bind:style 直接设置样式: 实例 73 m" V! h( D' K0 R+ l) h4 T
% a, H, S4 ~* D7 c
- <div id="app">5 a4 D) E# }5 u8 Q( Y
- <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>
; O: l9 o7 [ @! n! V5 u0 ^ - </div>
复制代码 以上实例 div style 为:
* u* t. j' F, U' }" u& O- <div style="color: green; font-size: 30px;">菜鸟教程</div>
复制代码也可以直接绑定到一个样式对象,让模板更清晰: 实例 8
; q+ c+ a ]" i
# ?8 {( K8 P' ]8 R- <div id="app">
* U" H5 L0 V2 X; K: Z$ b - <div v-bind:style="styleObject">菜鸟教程</div>
6 |. r' e0 l+ [" l0 t5 P; b S - </div>
复制代码v-bind:style 可以使用数组将多个样式对象应用到一个元素上: 实例 9
' x$ H! R* i& Z/ d+ ^& O& v% Q& A+ b; s ] T: D
- <div id="app">) K2 _9 R9 `: R6 L2 \
- <div v-bind:style="[baseStyles, overridingStyles]">菜鸟教程</div>) [" @" o8 J! G1 Y: d* Q! B. n$ Y0 Z
- </div>
复制代码 1 m; x3 r1 W5 o. I [
; b4 G9 w+ c1 ?' @3 ?. `* {
注意:当 v-bind:style 使用需要特定前缀的 CSS 属性时,如 transform ,Vue.js 会自动侦测并添加相应的前缀。1 q$ o- `1 n; u7 j- w
& U. ^& X# C- H! J: L/ F& s2 f% N( P8 {; _) k, o- g3 L* ~
2 s, N, ]& \5 z- T) a" I' P) }* _2 @0 }8 K0 z" j
|