3 D" a+ Q; h4 y
Vue.js classclass 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性。 Vue.js v-bind 在处理 class 和 style 时, 专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组。 class 属性绑定我们可以为 v-bind:class 设置一个对象,从而动态的切换 class: 实例 1实例中将 isActive 设置为 true 显示了一个绿色的 div 块,如果设置为 false 则不显示: ! g8 U% p. A! W2 ?# M* ^5 d
5 T4 ^' O( k6 e% ^6 ~4 X- <div v-bind:class="{ active: isActive }"></div>
复制代码 以上实例 div class 为:
+ P+ D' p) j- A, J- <div class="active"></div>
复制代码我们也可以在对象中传入更多属性用来动态切换多个 class 。 实例 2text-danger 类背景颜色覆盖了 active 类的背景色: # Z. L! J& B; B
3 L& t& y* m* c' |" h
- <div class="static"9 c6 ^6 D! x8 p, l* d0 N" J
- v-bind:class="{ active: isActive, 'text-danger': hasError }">
' y* [" b1 ^8 r# L* q# K- Y - </div>
复制代码 以上实例 div class 为:
1 |- w: a, ^5 Q3 X; b- <div class="static active text-danger"></div>
复制代码我们也可以直接绑定数据里的一个对象: 实例 3text-danger 类背景颜色覆盖了 active 类的背景色:
6 T9 P. f' r* p/ i- ?! }) C `& W; U
- <div id="app">
# j8 i' N! z+ c; j - <div v-bind:class="classObject"></div>- a5 D s! k# _* h1 i' @
- </div>
复制代码实例 3 与 实例 2 的渲染结果是一样的。 此外,我们也可以在这里绑定返回对象的计算属性。这是一个常用且强大的模式: 实例 45 Q! {! {3 `6 V9 c% ^
' u! E& ~- z1 | u( D+ I! {3 c
- new Vue({
. M/ x W/ b0 p# k4 E# o) ? - el: '#app',
4 f0 `, r- G; S$ T! V1 q) w9 a/ o - data: {
* c- P0 ?! u- }$ k) ` - isActive: true,# l: R# K- P8 Y6 |8 C: @2 I
- error: null
, z3 ^$ z+ o& a& r" V" J$ @ - },
. n F; {( s; x) d B* a. B. O - computed: {3 [. c# e* H9 O1 Y# Y/ Q
- classObject: function () {
* o# j9 \" k5 _4 n8 B$ T+ } - return {
( a4 b& l! H. d; o8 p8 x w - active: this.isActive && !this.error,
$ a6 k. D2 v+ V& p8 y- d8 T$ u - 'text-danger': this.error && this.error.type === 'fatal',
! \+ D5 y6 \% d6 R - }
5 O( G+ N" q9 E) C) _6 Q# F8 Q* O - }
3 D: N$ Q* h" r3 P$ A c8 M/ W5 C - }
, k% L# T+ i. n( {) H8 T& \. M - })
复制代码 数组语法我们可以把一个数组传给 v-bind:class ,实例如下: 实例 56 M/ {; u1 O; q$ M
5 g T# i/ k+ o! d7 k% M- <div v-bind:class="[activeClass, errorClass]"></div>
复制代码 以上实例 div class 为:
- k9 C/ j. b$ q& k( ?% c: r0 X- <div class="active text-danger"></div>
复制代码我们还可以使用三元表达式来切换列表中的 class : 实例 6errorClass 是始终存在的,isActive 为 true 时添加 activeClass 类: % P {$ r& p3 k- k' O0 b |5 A2 S
. l/ k8 n# p5 ^3 v
- <div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
复制代码
* R7 K/ f2 l, ?% G
_% Z$ ], f- s$ B) F% g7 ^; `Vue.js style(内联样式)我们可以在 v-bind:style 直接设置样式: 实例 71 V2 X- _ N! a! D+ n
) H" w. J+ c) Z) Y
- <div id="app">
% U# g3 G& V0 o7 K' U - <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>& t; ?/ h) b9 f; T
- </div>
复制代码 以上实例 div style 为:! s! |; U! w4 p3 b. g) b9 F8 b
- <div style="color: green; font-size: 30px;">菜鸟教程</div>
复制代码也可以直接绑定到一个样式对象,让模板更清晰: 实例 8. i+ f% M: r9 V) C$ v% N* s
( r1 B/ A2 G. d) ^& s- <div id="app">
" G0 O2 c" n' U+ J8 E, `" q - <div v-bind:style="styleObject">菜鸟教程</div>
3 g j# Y( r! E0 ? - </div>
复制代码v-bind:style 可以使用数组将多个样式对象应用到一个元素上: 实例 9. G% q* [: \ a2 e! W7 N$ f! K0 c
' Q0 \( ?9 h# {/ J6 t. H; D- <div id="app">
[# J& J2 J" P - <div v-bind:style="[baseStyles, overridingStyles]">菜鸟教程</div>9 q: B9 c [( ^" p, W- N( [; i3 t
- </div>
复制代码
* y: s( Q% P V8 N: `" e3 |# E
) F- N) O6 y0 t注意:当 v-bind:style 使用需要特定前缀的 CSS 属性时,如 transform ,Vue.js 会自动侦测并添加相应的前缀。
7 r2 Z% t( k8 t+ p& [5 I* Q* r" o U6 i2 @
5 l) H& A( t; S, `& h( R2 ?( y# G- `( c) R ]0 n2 O7 h: I
9 i' j5 p1 o/ w/ }" I7 L
% \( t/ y2 W; h |