$ `( z6 F2 E* ~* T9 ?) d
Vue.js classclass 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性。 Vue.js v-bind 在处理 class 和 style 时, 专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组。 class 属性绑定我们可以为 v-bind:class 设置一个对象,从而动态的切换 class: 实例 1实例中将 isActive 设置为 true 显示了一个绿色的 div 块,如果设置为 false 则不显示: 2 g' h! d6 G' h9 S3 v0 ?, k$ s
9 G& ^# J) C: `: O+ y0 ^6 Q' `- <div v-bind:class="{ active: isActive }"></div>
复制代码 以上实例 div class 为:
% V- J/ j4 Z* ^2 A+ r- <div class="active"></div>
复制代码我们也可以在对象中传入更多属性用来动态切换多个 class 。 实例 2text-danger 类背景颜色覆盖了 active 类的背景色:
6 y; ]# M7 ^% u" S& w0 _+ `; }, m8 Z7 G b b
- <div class="static"
" P. m6 r# B) _) q' t5 ] - v-bind:class="{ active: isActive, 'text-danger': hasError }">
+ U; F. }% \! _0 M; c b. o - </div>
复制代码 以上实例 div class 为:* y4 g2 L! A. F/ c& [
- <div class="static active text-danger"></div>
复制代码我们也可以直接绑定数据里的一个对象: 实例 3text-danger 类背景颜色覆盖了 active 类的背景色: 3 p2 [* P3 j8 k& y7 e6 U
; d+ ~ ~! r7 x9 m/ K2 t4 F% x- <div id="app">: X- |8 x: t2 Q* P+ h! R
- <div v-bind:class="classObject"></div>+ M( E3 [* h* t1 R6 S2 @( U7 H
- </div>
复制代码实例 3 与 实例 2 的渲染结果是一样的。 此外,我们也可以在这里绑定返回对象的计算属性。这是一个常用且强大的模式: 实例 4
# {& F0 ?8 r/ {7 m6 O" Q- c" M. W% p4 U1 h
- new Vue({
! @/ J- M* y6 w' L d8 F) E - el: '#app',
0 S [; K2 ~ g* i0 v+ P - data: {
& e8 V' ]0 ]% X5 f# q. Q - isActive: true,; w0 x! Q4 g- V0 _* z+ p
- error: null
$ H& K! O& s! R' x( f) Q2 V. e - },
# H- V0 V: d7 k$ s/ J! Y, T - computed: {
2 g/ M% ]6 }" V2 `* s9 | - classObject: function () {% G7 R- b& g' V! K% N' l: I
- return {1 F6 Y5 |7 T' B( x6 y0 B
- active: this.isActive && !this.error,: |2 K% g( o6 ?$ X5 l5 Q- y
- 'text-danger': this.error && this.error.type === 'fatal',
0 C3 X# ~$ g. Y6 Y# L5 f& R, p1 D2 K - }4 w+ m6 \7 e( i# K5 G: }
- }! C6 k- y; ^8 w4 s* x5 i a+ e
- }
$ q5 `( l, L$ h! O - })
复制代码 数组语法我们可以把一个数组传给 v-bind:class ,实例如下: 实例 5
/ Q& R4 q, _/ I& \3 E7 Y# K9 K# ]# Q- O9 W) H8 Y" `7 o: e
- <div v-bind:class="[activeClass, errorClass]"></div>
复制代码 以上实例 div class 为:6 O5 N o. x0 i8 w
- <div class="active text-danger"></div>
复制代码我们还可以使用三元表达式来切换列表中的 class : 实例 6errorClass 是始终存在的,isActive 为 true 时添加 activeClass 类: 9 P% X5 k& O9 d+ H
' V- T( E ~! b/ h: y/ g
- <div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
复制代码 % }' {. S+ [* g6 M
9 G7 i$ V8 ?1 `) x, l
Vue.js style(内联样式)我们可以在 v-bind:style 直接设置样式: 实例 7# C3 u4 j4 e. I, S$ s
- }: A2 \5 P: i7 T2 r
- <div id="app">8 a9 c/ o; ^, C8 o" l
- <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>
6 Y, R" l" `. {# `' D - </div>
复制代码 以上实例 div style 为: r/ H& O4 a& w! }0 n @
- <div style="color: green; font-size: 30px;">菜鸟教程</div>
复制代码也可以直接绑定到一个样式对象,让模板更清晰: 实例 8# Y" c( T7 ~# Q5 T8 y7 i: D
% K" Z5 G& ~& \! M0 @5 `/ w
- <div id="app">
! I. J, O" y* L* j# b' p. R, _! W - <div v-bind:style="styleObject">菜鸟教程</div>
. \9 d/ d" I* A+ d - </div>
复制代码v-bind:style 可以使用数组将多个样式对象应用到一个元素上: 实例 92 \ e, K8 p; ^% P
+ g) t* H' ~6 I. I6 l) Z3 o, R6 j- <div id="app">
% l- m8 P2 l" ^" }- B - <div v-bind:style="[baseStyles, overridingStyles]">菜鸟教程</div>
0 b, G' f( t- r# n4 h0 e5 i; F7 w - </div>
复制代码 4 S9 u; @! W, H! d4 y0 Y
* L# I1 b1 h4 d* t9 ]; E8 B! f% z3 S
注意:当 v-bind:style 使用需要特定前缀的 CSS 属性时,如 transform ,Vue.js 会自动侦测并添加相应的前缀。/ x( y4 S* L9 t t
/ c6 x! Y% J5 L; j
# X9 P Z7 `5 v4 q6 }
( E5 m: _7 ?8 c( Z$ p3 S. \
, f7 I# ~$ V& J5 @9 q+ A Y |