cncml手绘网
标题: Vue.js 样式绑定 [打印本页]
作者: admin 时间: 2018-7-4 11:12
标题: Vue.js 样式绑定
5 ] X" S m! J3 X0 p Q# ?; p
Vue.js classclass 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性。
Vue.js v-bind 在处理 class 和 style 时, 专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组。
class 属性绑定我们可以为 v-bind:class 设置一个对象,从而动态的切换 class:
实例 1实例中将 isActive 设置为 true 显示了一个绿色的 div 块,如果设置为 false 则不显示:
X6 W; M2 v" j' y: C7 }! `* K4 F
& y5 z+ s; z) D! b' M& Q5 @ @& u
- <div v-bind:class="{ active: isActive }"></div>
复制代码 以上实例 div class 为:+ p v3 H* l( d/ f- n2 |# o% {
- <div class="active"></div>
复制代码我们也可以在对象中传入更多属性用来动态切换多个 class 。
实例 2text-danger 类背景颜色覆盖了 active 类的背景色:
4 C9 X( ]) G8 l7 ]; q2 \
1 ^2 D* L' e4 X5 v$ e& A4 V- <div class="static"
# `, F6 i* R4 `3 g7 f - v-bind:class="{ active: isActive, 'text-danger': hasError }">! h' O9 h; p: ~8 \6 H
- </div>
复制代码 以上实例 div class 为:0 O5 r* v+ s0 P/ Z% z& k: C3 f, C
- <div class="static active text-danger"></div>
复制代码我们也可以直接绑定数据里的一个对象:
实例 3text-danger 类背景颜色覆盖了 active 类的背景色:
+ s) b' j6 E9 Z
( U9 n9 [# [9 z7 [
- <div id="app">
, v4 V4 i1 l. K - <div v-bind:class="classObject"></div>' ~1 \6 n/ G' i( ~% w
- </div>
复制代码实例 3 与 实例 2 的渲染结果是一样的。
此外,我们也可以在这里绑定返回对象的计算属性。这是一个常用且强大的模式:
实例 4
' W2 \" A X$ @% d0 V. s/ Q* e8 t7 k
- new Vue({0 m0 M& u' ]. A8 W
- el: '#app'," ~9 s- Y" z/ [$ H
- data: {. F5 d4 E4 @9 i. M: P$ M5 v
- isActive: true,4 J9 W% J! D2 H- K' Z$ N' O4 {# i
- error: null, F" U W9 K1 E( z7 h$ }
- },
6 m a& V- n: U3 r( k& o# | R - computed: {% H0 K# I/ D; j S/ r
- classObject: function () {6 C$ a; A+ b- c3 }6 B \$ y* r1 P) E% g
- return {
" P4 d; E% W' Z ?/ U' e - active: this.isActive && !this.error,9 W" t0 o' W9 R& b( R
- 'text-danger': this.error && this.error.type === 'fatal',
9 o% r# d i; l! d0 @ - }
% K! I$ f$ M: t- G - }$ O* u. u1 `9 t @& F1 ]% v
- }
; ?5 T2 U5 k9 n7 `( X - })
复制代码 数组语法我们可以把一个数组传给 v-bind:class ,实例如下:
实例 5
$ N1 v( M3 g' G2 d3 R
( J5 m7 d5 Z7 X. K& z9 Z! p- <div v-bind:class="[activeClass, errorClass]"></div>
复制代码 以上实例 div class 为:
' N3 U4 k9 Q: F: P. E9 V- <div class="active text-danger"></div>
复制代码我们还可以使用三元表达式来切换列表中的 class :
实例 6errorClass 是始终存在的,isActive 为 true 时添加 activeClass 类:
: b7 J5 x! X7 m) g+ L
6 p1 D; f6 u6 [4 V% U) `- <div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
复制代码 " ^2 O5 }+ o/ F4 ^2 O- P
* M5 F3 I! m0 X: ?) o+ z6 nVue.js style(内联样式)我们可以在 v-bind:style 直接设置样式:
实例 7" n6 w. |5 K6 E' b5 c' j+ H$ T
" V c' E6 B! i4 B% @$ C! H2 E- <div id="app">
) O* _8 \" C- P9 e# K) M - <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>
/ |) @0 n! Q4 X0 D, Z - </div>
复制代码 以上实例 div style 为:9 C y2 f( N* m5 W, p3 x' T
- <div style="color: green; font-size: 30px;">菜鸟教程</div>
复制代码也可以直接绑定到一个样式对象,让模板更清晰:
实例 82 k9 V! h* @( C9 p" y3 P6 p
4 y! n$ ~( l6 ^7 V
- <div id="app">
3 h3 V W& _- A- L4 \% Z% J( s - <div v-bind:style="styleObject">菜鸟教程</div>
: s0 n2 e: D! ~" h7 C! P - </div>
复制代码v-bind:style 可以使用数组将多个样式对象应用到一个元素上:
实例 9; j$ s' J( P* s9 z7 J6 l9 U1 ^2 l
3 H) [' [0 ?5 ?" ]- <div id="app">
F V, o+ v8 m, ], Q k - <div v-bind:style="[baseStyles, overridingStyles]">菜鸟教程</div>
9 F3 W. g/ c5 h/ M/ s - </div>
复制代码
) a) h: Y5 S# L4 @
" m$ Q% ]" }+ \# K, t注意:当 v-bind:style 使用需要特定前缀的 CSS 属性时,如 transform ,Vue.js 会自动侦测并添加相应的前缀。7 L! @4 F7 j' q9 K
3 w8 w& b8 {# M7 ?7 b# i
+ I% i0 j8 K# _! E# w8 Y( `7 E, j/ J( X& S9 q5 `0 B; x$ l4 q
, R6 D6 i' Y* L. r3 ?
欢迎光临 cncml手绘网 (http://bbs.cncml.com/) |
Powered by Discuz! X3.2 |