1 G! }5 z+ A3 X9 ^
Vue.js classclass 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性。 Vue.js v-bind 在处理 class 和 style 时, 专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组。 class 属性绑定我们可以为 v-bind:class 设置一个对象,从而动态的切换 class: 实例 1实例中将 isActive 设置为 true 显示了一个绿色的 div 块,如果设置为 false 则不显示:
0 {8 R5 N, v9 f; \* s: x! M* K+ [' g
- <div v-bind:class="{ active: isActive }"></div>
复制代码 以上实例 div class 为:
( h! A& c; G' w, ]- <div class="active"></div>
复制代码我们也可以在对象中传入更多属性用来动态切换多个 class 。 实例 2text-danger 类背景颜色覆盖了 active 类的背景色: + P) X6 x8 j3 S* v) I5 J
" e) ^7 q, `) |" a$ z6 G& z- <div class="static"1 J. g5 s* t1 O# n8 Q" l$ r
- v-bind:class="{ active: isActive, 'text-danger': hasError }">5 Y1 l- o( Z: \5 N3 _* I6 l
- </div>
复制代码 以上实例 div class 为:
x2 T4 s- Y' G2 M9 e& s1 k" K3 b- <div class="static active text-danger"></div>
复制代码我们也可以直接绑定数据里的一个对象: 实例 3text-danger 类背景颜色覆盖了 active 类的背景色:
1 H: ]% }2 G% U! S+ X9 V# W2 t7 H% F) I# P1 x9 P, N( H
- <div id="app">6 P- S6 U% |$ M2 [ d
- <div v-bind:class="classObject"></div>; r+ Y; N: n7 r) U6 } m3 D
- </div>
复制代码实例 3 与 实例 2 的渲染结果是一样的。 此外,我们也可以在这里绑定返回对象的计算属性。这是一个常用且强大的模式: 实例 4
2 f' X# w+ q( m" q/ W7 Y; g
9 }3 I3 j6 \1 a1 ]+ l# e- new Vue({) ?% T! D( m' O5 z* |5 q
- el: '#app',
$ v- @; ~! G6 | - data: {
" Q* Z' o9 s- v" {3 ~ b; \) Z - isActive: true,5 F* i4 F2 }: p( ~+ Y% b! I
- error: null
- b/ Q* R- }( M* y+ q# H6 N - },
# _8 M7 q6 M0 g - computed: {! Z( T2 v) O/ n* ^1 t$ P
- classObject: function () {! R( Z* T( C; p
- return {
+ [# N* ~5 Q s$ J - active: this.isActive && !this.error,
8 \: i; C& Y+ i; T - 'text-danger': this.error && this.error.type === 'fatal',
4 c% ^7 r/ i. n$ i8 O8 P - }
: H7 Z9 \ n' B ] - }
/ q5 S" w$ S' k; g9 ^& q - }) t: F# ]$ d0 J' C8 x8 M0 P
- })
复制代码 数组语法我们可以把一个数组传给 v-bind:class ,实例如下: 实例 52 b- f% Y) g; c6 K; G! f; P
j! l+ T [, F5 [: Y1 J2 `- <div v-bind:class="[activeClass, errorClass]"></div>
复制代码 以上实例 div class 为:
5 [1 X: D9 M2 G E8 U- <div class="active text-danger"></div>
复制代码我们还可以使用三元表达式来切换列表中的 class : 实例 6errorClass 是始终存在的,isActive 为 true 时添加 activeClass 类: + { s3 M" a; Q/ B# S/ y. Y" m
/ w" x8 @" d% R* d- e9 V- <div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
复制代码 $ Y/ Q# l! G# [) R$ K& m4 n
3 y: A$ S, u. m
Vue.js style(内联样式)我们可以在 v-bind:style 直接设置样式: 实例 70 u# C7 k/ h1 Y2 Z
" G; }$ {3 G+ N2 U% o/ k( z- <div id="app">" |7 J9 l" a4 l2 Z
- <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>
: B9 @8 u+ w% v- e - </div>
复制代码 以上实例 div style 为:
% P5 c+ D+ _3 Q6 I) v4 [' x- <div style="color: green; font-size: 30px;">菜鸟教程</div>
复制代码也可以直接绑定到一个样式对象,让模板更清晰: 实例 89 z2 {" f0 O& P' E# Z
5 f- t1 E' P" L. p- <div id="app">9 U2 \& H9 c+ u" y7 @6 H0 | y
- <div v-bind:style="styleObject">菜鸟教程</div>
* R' s' q' B; z/ T6 u, `. p - </div>
复制代码v-bind:style 可以使用数组将多个样式对象应用到一个元素上: 实例 95 M9 {- u( A( B! H2 d# t G) z
6 W3 t0 a: @( J9 q4 ?: q5 \, t- <div id="app">
2 _$ D$ b: d/ u7 [& N/ L - <div v-bind:style="[baseStyles, overridingStyles]">菜鸟教程</div>4 C% Q/ u) Y5 c: {
- </div>
复制代码 & [' }) Z; X5 }& k% R( s0 T6 O+ G
]1 l; Y6 R0 A
注意:当 v-bind:style 使用需要特定前缀的 CSS 属性时,如 transform ,Vue.js 会自动侦测并添加相应的前缀。) I- M& t% c6 m5 A I+ |* b
) P6 |0 j# L* w6 z9 s! u
% b; r2 K1 S+ h- E8 G
" s/ B/ W" e0 U
3 N/ @1 b* w9 O- }; t5 @$ r$ C |