8 V2 v# N! ^* p8 O+ V* R
Vue.js classclass 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性。 Vue.js v-bind 在处理 class 和 style 时, 专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组。 class 属性绑定我们可以为 v-bind:class 设置一个对象,从而动态的切换 class: 实例 1实例中将 isActive 设置为 true 显示了一个绿色的 div 块,如果设置为 false 则不显示: # [4 v8 j6 K& f1 A6 i5 X
6 i7 Y3 W& l! H- <div v-bind:class="{ active: isActive }"></div>
复制代码 以上实例 div class 为:
) q$ W+ T- }: `3 l& N+ p- <div class="active"></div>
复制代码我们也可以在对象中传入更多属性用来动态切换多个 class 。 实例 2text-danger 类背景颜色覆盖了 active 类的背景色:
2 s+ L; _# N3 W q! n. ]- _; d5 _" n6 x3 }2 K A) X
- <div class="static"3 w7 P: r8 l* M$ b. X; Y" P
- v-bind:class="{ active: isActive, 'text-danger': hasError }">" ^+ d+ C8 [6 U9 w7 h" U; h! w
- </div>
复制代码 以上实例 div class 为:
+ j$ S& r4 I( F- X- <div class="static active text-danger"></div>
复制代码我们也可以直接绑定数据里的一个对象: 实例 3text-danger 类背景颜色覆盖了 active 类的背景色:
( p2 B1 h6 @; l1 b% A2 _2 L( A
' _; n: ^( P! z( \- <div id="app">0 g. \! |: {1 S/ T0 T
- <div v-bind:class="classObject"></div>
5 s1 C8 i; q6 j! h - </div>
复制代码实例 3 与 实例 2 的渲染结果是一样的。 此外,我们也可以在这里绑定返回对象的计算属性。这是一个常用且强大的模式: 实例 4% V2 y9 T6 F: j8 U$ V5 ^; G
# c1 [/ S- J ?" d- new Vue({
, n5 |9 Y+ G6 l% ]% \ - el: '#app',
& G. t$ J: S. Z3 T0 M l+ ] - data: {3 v' J+ m2 k3 g" W2 A
- isActive: true,; U- r* d7 V# Q
- error: null; D4 ?' |1 _4 \! q* w0 G7 L
- },, L" H7 {3 C8 _, ]+ e& A
- computed: {) |" k7 k* H* p, f
- classObject: function () {3 Q, B4 X4 z Z$ ]
- return {
5 S) S0 y6 x2 _+ r& Y, l/ D - active: this.isActive && !this.error,
3 G6 y% O4 x' e& Q+ ]8 T* T - 'text-danger': this.error && this.error.type === 'fatal',
' C( e& M& s$ ?& g- w$ z( P - }
, t9 y& L: b% [9 N6 y) y - }0 Y6 {- E8 o: V' i8 k3 o+ _
- }% N2 [( m/ w/ W" d2 g' L7 ~
- })
复制代码 数组语法我们可以把一个数组传给 v-bind:class ,实例如下: 实例 5
/ V$ i. T2 a5 u N y. ]5 a
4 e3 C r' Z" ~: n1 {- <div v-bind:class="[activeClass, errorClass]"></div>
复制代码 以上实例 div class 为:
8 W' B9 k5 S6 Y$ b- <div class="active text-danger"></div>
复制代码我们还可以使用三元表达式来切换列表中的 class : 实例 6errorClass 是始终存在的,isActive 为 true 时添加 activeClass 类:
! m8 B( S8 _ _6 z# C# v4 O E
1 b4 I0 E" u) b8 Y5 V6 _- <div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
复制代码 - s6 l* G0 A; k: m8 m6 ^
/ U& \' v) C- O" L$ \/ p
Vue.js style(内联样式)我们可以在 v-bind:style 直接设置样式: 实例 77 V4 j0 m; e" c3 ]8 x
/ u1 {9 W. H# V9 w, _$ \( k
- <div id="app">
2 Y4 C) h* W/ |( Y9 Z - <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>. v& K* e" O0 \5 P3 o3 ~2 a
- </div>
复制代码 以上实例 div style 为:
7 C# C5 `. d% R9 k) {8 `$ Z- <div style="color: green; font-size: 30px;">菜鸟教程</div>
复制代码也可以直接绑定到一个样式对象,让模板更清晰: 实例 8
, O+ m+ Y3 y4 P# O. }
) m# K- D* b6 v4 I. z1 O- <div id="app">
( F; `# z9 q, B! z* m% C - <div v-bind:style="styleObject">菜鸟教程</div>7 C6 h6 _7 ^; ^4 j7 \( K
- </div>
复制代码v-bind:style 可以使用数组将多个样式对象应用到一个元素上: 实例 96 a) `' ]& R. U9 l2 Y6 w- _
% [# K6 R* M! Y8 V1 [. ]+ g' N
- <div id="app">
! M% [ n* d2 ?# W - <div v-bind:style="[baseStyles, overridingStyles]">菜鸟教程</div>
9 ?* ]6 J# D: }# U - </div>
复制代码 7 I2 {4 l9 R; }: J7 v5 b
1 Y+ d$ C9 \. i9 b/ y1 S2 @" b
注意:当 v-bind:style 使用需要特定前缀的 CSS 属性时,如 transform ,Vue.js 会自动侦测并添加相应的前缀。! p5 f6 A7 P) p+ w& i# M, R, t
- I% g9 h* p0 A7 R; F
/ a2 D0 j, s* M; W! }# Y' f2 L P8 Q7 K2 C9 P
' s, U" Y" g5 N; t( k) a/ S: N4 A# O! {
|