+ d: S) G' j5 W* W: x
Vue.js classclass 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性。 Vue.js v-bind 在处理 class 和 style 时, 专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组。 class 属性绑定我们可以为 v-bind:class 设置一个对象,从而动态的切换 class: 实例 1实例中将 isActive 设置为 true 显示了一个绿色的 div 块,如果设置为 false 则不显示: ! ^7 W" f U7 [0 d
* P4 M+ D$ @4 i6 f( o
- <div v-bind:class="{ active: isActive }"></div>
复制代码 以上实例 div class 为:
. g5 \' x' p/ j- <div class="active"></div>
复制代码我们也可以在对象中传入更多属性用来动态切换多个 class 。 实例 2text-danger 类背景颜色覆盖了 active 类的背景色: : P; G, o1 g0 J7 d0 D
7 A$ x6 b" b- @. D' O+ i7 S# T- <div class="static"
% J$ G& C! o' s - v-bind:class="{ active: isActive, 'text-danger': hasError }">
( @; I7 b9 f+ x( c, q. { - </div>
复制代码 以上实例 div class 为:2 g: D1 d! [5 J. F9 \$ C
- <div class="static active text-danger"></div>
复制代码我们也可以直接绑定数据里的一个对象: 实例 3text-danger 类背景颜色覆盖了 active 类的背景色: & {) R8 S% [# R3 n
) r0 x" R. d4 \3 g
- <div id="app">
! X9 @7 W& x. O, D - <div v-bind:class="classObject"></div>
( |, V1 g9 K7 S+ B - </div>
复制代码实例 3 与 实例 2 的渲染结果是一样的。 此外,我们也可以在这里绑定返回对象的计算属性。这是一个常用且强大的模式: 实例 44 [; i8 a2 ~ h/ H1 D
8 T9 Y0 \) c& z( V8 @/ D- new Vue({
3 B$ w2 _5 Q$ |4 Q+ a2 k4 P - el: '#app',* }% i$ |! o0 w1 f( S4 f" g
- data: {. S Z. k+ F$ ^, v" f
- isActive: true,
* P5 V5 x1 {1 u# E! B! D - error: null
$ {% l' W3 r; q( S0 \7 M& T$ X - },' c( V/ ]% Z- t3 i4 |4 O
- computed: {6 T9 \% q' M# n! Y0 ~" n
- classObject: function () {
( |( \( i( A9 D2 ?5 c - return {2 [- t3 l- Y/ b1 V
- active: this.isActive && !this.error,; |" ?1 @5 _ B. A9 X0 p$ \' \( Y: K' k
- 'text-danger': this.error && this.error.type === 'fatal',0 Y; C& X/ |9 v% ^8 |* X
- }
% _: D K1 u. I0 d0 x" Z - }
. F2 S) Z& r) K" N8 K - }
3 v7 A7 z0 H* a6 R6 p) j2 q; i5 R - })
复制代码 数组语法我们可以把一个数组传给 v-bind:class ,实例如下: 实例 5$ }7 F2 H3 E# t6 s7 J& {% f
# A& w0 T+ A4 W3 ~ n' d
- <div v-bind:class="[activeClass, errorClass]"></div>
复制代码 以上实例 div class 为:& {4 a% v( i$ ~% x( j$ W q7 e
- <div class="active text-danger"></div>
复制代码我们还可以使用三元表达式来切换列表中的 class : 实例 6errorClass 是始终存在的,isActive 为 true 时添加 activeClass 类:
9 O8 [( B( a' c5 I7 M
% a0 w5 s( }: N, ^# j3 w- <div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
复制代码 1 f! l" N6 s. c& a. C
3 w* D$ j6 [8 L9 e( c. X
Vue.js style(内联样式)我们可以在 v-bind:style 直接设置样式: 实例 7
/ V( M! g& D. Z, F& }
; C! T: u9 C+ @3 o) C- }& r$ n/ ~- <div id="app">
. ~0 s7 j& |/ ?6 d! k( u6 R9 t - <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>
! m& n( A5 Q. ^0 }/ _# c! h! }, m7 g8 B - </div>
复制代码 以上实例 div style 为:4 F, p1 G+ ]+ b! V6 Y
- <div style="color: green; font-size: 30px;">菜鸟教程</div>
复制代码也可以直接绑定到一个样式对象,让模板更清晰: 实例 8
) U: G2 a, i$ G- @8 N; j
7 c. ~# ~( N g0 j; R4 q& \- <div id="app">
# d( A5 X: L2 z/ S) R - <div v-bind:style="styleObject">菜鸟教程</div>
; w- `: Y% l, i5 x9 | - </div>
复制代码v-bind:style 可以使用数组将多个样式对象应用到一个元素上: 实例 9' S9 F* O' d5 ]- T* u
+ _! ^! `% S) g
- <div id="app">4 M J6 J9 \! N+ O+ s0 S
- <div v-bind:style="[baseStyles, overridingStyles]">菜鸟教程</div>
; F# }# p1 q; f- ]: _5 n/ d0 m - </div>
复制代码 ! q) @ v( M* _$ M5 x! i; e' c
2 L9 i( }5 U, a
注意:当 v-bind:style 使用需要特定前缀的 CSS 属性时,如 transform ,Vue.js 会自动侦测并添加相应的前缀。
# V; j' t7 C" R7 x
$ b: G# _- S0 V3 Y$ T/ e) f* W0 s6 W, T4 b" ]9 x
: q2 z4 V. f8 Y
* U% j m# {0 k d4 @# Z! F4 Y
|