! F' j4 V z/ I7 n; f
Vue.js classclass 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性。 Vue.js v-bind 在处理 class 和 style 时, 专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组。 class 属性绑定我们可以为 v-bind:class 设置一个对象,从而动态的切换 class: 实例 1实例中将 isActive 设置为 true 显示了一个绿色的 div 块,如果设置为 false 则不显示: 7 ^( q" h/ A1 a; i
8 j( ~( l& ]. T* _0 T8 \- <div v-bind:class="{ active: isActive }"></div>
复制代码 以上实例 div class 为:
) {- P! \$ Z) s6 g+ w- <div class="active"></div>
复制代码我们也可以在对象中传入更多属性用来动态切换多个 class 。 实例 2text-danger 类背景颜色覆盖了 active 类的背景色:
6 t1 ^3 @" B/ ]. u. H0 e
0 m d, g m# A# V' ^- <div class="static"7 z( U( p" p& E9 U6 _- F
- v-bind:class="{ active: isActive, 'text-danger': hasError }">
, S. q- Y8 _( A! @& e0 R2 Y0 W - </div>
复制代码 以上实例 div class 为:- ~- k; X) Y3 j9 R8 w
- <div class="static active text-danger"></div>
复制代码我们也可以直接绑定数据里的一个对象: 实例 3text-danger 类背景颜色覆盖了 active 类的背景色:
$ J; M/ l# W& g9 ?! Y" I7 u9 @" G. d4 M! P6 j
- <div id="app">9 J( p( G9 _2 p6 [1 n
- <div v-bind:class="classObject"></div>
" @( v$ m+ J: I# v7 Y$ J. b - </div>
复制代码实例 3 与 实例 2 的渲染结果是一样的。 此外,我们也可以在这里绑定返回对象的计算属性。这是一个常用且强大的模式: 实例 4
3 C& e' D/ a3 b) @; _' M [$ m, a& G# P9 }1 a4 O5 H. T
- new Vue({
% `5 U( a0 I0 W7 r2 o: l! C - el: '#app',
. k+ r8 c# T& M' I( X. O# R( m/ i9 x* K - data: {
" x( D- z$ P/ e( S7 \1 B5 a/ s - isActive: true,
5 j; v+ p' h1 S1 ^, X7 } - error: null# u2 ?9 o* ~6 K: J) Y
- },; r' ?1 Q y' M3 c( a+ L
- computed: {
/ K% l9 I* g) w- m) j - classObject: function () {
, \: u! V8 L- Z. i3 \ - return {
) \4 n3 Y( d6 i8 ?4 C4 i# ?% E) _% k - active: this.isActive && !this.error,, w' o5 @0 h" L+ q! |1 k
- 'text-danger': this.error && this.error.type === 'fatal',2 K2 t! t$ J; h6 ], t# K5 V; k+ C
- }
7 X. d( k$ J1 Z& X - }5 k) s* |9 J: v2 d0 O8 K' B# A! `. y
- }
7 ` K6 Y0 k$ K% B0 o - })
复制代码 数组语法我们可以把一个数组传给 v-bind:class ,实例如下: 实例 5& l4 L7 |. A0 H$ u& H
( k! g b; E& h6 I% l
- <div v-bind:class="[activeClass, errorClass]"></div>
复制代码 以上实例 div class 为:
- b, ~" u& i) ^6 K1 E' c- <div class="active text-danger"></div>
复制代码我们还可以使用三元表达式来切换列表中的 class : 实例 6errorClass 是始终存在的,isActive 为 true 时添加 activeClass 类: ' K& v$ M. ^/ @- _8 z* g
; x: }: k# ^( r* f
- <div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
复制代码 1 x# V! r% O# Y. E$ ?
) { X( P' j+ D& O% E( D* v2 D' b
Vue.js style(内联样式)我们可以在 v-bind:style 直接设置样式: 实例 74 I$ b3 y& L. U; W
3 F( X( E. d7 f- i
- <div id="app">9 a9 C8 | O- j/ c1 b# O
- <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>
1 P& A% A( K \ - </div>
复制代码 以上实例 div style 为:
& V7 l! v4 Q I4 L! l, f- <div style="color: green; font-size: 30px;">菜鸟教程</div>
复制代码也可以直接绑定到一个样式对象,让模板更清晰: 实例 8
|- u+ Y1 C2 v& r+ h: Y4 d+ O# P: Y3 j$ c
- <div id="app">
+ v |! d% q: D6 k3 r* d( `4 w - <div v-bind:style="styleObject">菜鸟教程</div>
+ E; e5 }1 E2 q$ o5 W: O0 i) O - </div>
复制代码v-bind:style 可以使用数组将多个样式对象应用到一个元素上: 实例 94 G& c* X; [* ?: a9 P/ c
: T) B9 L% x2 {# t& @8 j' u) L- <div id="app">
r/ }5 x9 U. k, d - <div v-bind:style="[baseStyles, overridingStyles]">菜鸟教程</div>" l6 D% G: |0 \' F' W
- </div>
复制代码 . x8 A2 Z3 F `, `
' m& K& Y$ m* [4 Z" _
注意:当 v-bind:style 使用需要特定前缀的 CSS 属性时,如 transform ,Vue.js 会自动侦测并添加相应的前缀。' o O V$ [6 v' W% e
$ o% o6 P2 n# Y3 |" o% g
2 s1 [" L1 Y4 w& K$ p! N2 z
# W6 E6 [! h2 i v& X4 a! K2 S# ~* k+ e4 i! P f1 [
|