cncml手绘网

标题: Vue.js 样式绑定 [打印本页]

作者: admin    时间: 2018-7-4 11:12
标题: Vue.js 样式绑定
5 ]  X" S  m! J3 X0 p  Q# ?; p
Vue.js class
class 与 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
  1. <div v-bind:class="{ active: isActive }"></div>
复制代码
以上实例 div class 为:+ p  v3 H* l( d/ f- n2 |# o% {
  1. <div class="active"></div>
复制代码
我们也可以在对象中传入更多属性用来动态切换多个 class 。
实例 2
text-danger 类背景颜色覆盖了 active 类的背景色:
4 C9 X( ]) G8 l7 ]; q2 \

1 ^2 D* L' e4 X5 v$ e& A4 V
  1. <div class="static"
    # `, F6 i* R4 `3 g7 f
  2.      v-bind:class="{ active: isActive, 'text-danger': hasError }">! h' O9 h; p: ~8 \6 H
  3. </div>
复制代码
以上实例 div class 为:0 O5 r* v+ s0 P/ Z% z& k: C3 f, C
  1. <div class="static active text-danger"></div>
复制代码
我们也可以直接绑定数据里的一个对象:
实例 3
text-danger 类背景颜色覆盖了 active 类的背景色:
+ s) b' j6 E9 Z
( U9 n9 [# [9 z7 [
  1. <div id="app">
    , v4 V4 i1 l. K
  2.   <div v-bind:class="classObject"></div>' ~1 \6 n/ G' i( ~% w
  3. </div>
复制代码
实例 3 与 实例 2 的渲染结果是一样的。
此外,我们也可以在这里绑定返回对象的计算属性。这是一个常用且强大的模式:
实例 4
' W2 \" A  X$ @% d0 V. s/ Q* e8 t7 k
  1. new Vue({0 m0 M& u' ]. A8 W
  2.   el: '#app'," ~9 s- Y" z/ [$ H
  3.   data: {. F5 d4 E4 @9 i. M: P$ M5 v
  4.   isActive: true,4 J9 W% J! D2 H- K' Z$ N' O4 {# i
  5.   error: null, F" U  W9 K1 E( z7 h$ }
  6.   },
    6 m  a& V- n: U3 r( k& o# |  R
  7.   computed: {% H0 K# I/ D; j  S/ r
  8.     classObject: function () {6 C$ a; A+ b- c3 }6 B  \$ y* r1 P) E% g
  9.       return {
    " P4 d; E% W' Z  ?/ U' e
  10.         active: this.isActive && !this.error,9 W" t0 o' W9 R& b( R
  11.         'text-danger': this.error && this.error.type === 'fatal',
    9 o% r# d  i; l! d0 @
  12.       }
    % K! I$ f$ M: t- G
  13.     }$ O* u. u1 `9 t  @& F1 ]% v
  14.   }
    ; ?5 T2 U5 k9 n7 `( X
  15. })
复制代码
数组语法
我们可以把一个数组传给 v-bind:class ,实例如下:
实例 5
$ N1 v( M3 g' G2 d3 R
( J5 m7 d5 Z7 X. K& z9 Z! p
  1. <div v-bind:class="[activeClass, errorClass]"></div>
复制代码
以上实例 div class 为:
' N3 U4 k9 Q: F: P. E9 V
  1. <div class="active text-danger"></div>
复制代码
我们还可以使用三元表达式来切换列表中的 class :
实例 6
errorClass 是始终存在的,isActive 为 true 时添加 activeClass 类:
: b7 J5 x! X7 m) g+ L

6 p1 D; f6 u6 [4 V% U) `
  1. <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
  1. <div id="app">
    ) O* _8 \" C- P9 e# K) M
  2.     <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>
    / |) @0 n! Q4 X0 D, Z
  3. </div>
复制代码
以上实例 div style 为:9 C  y2 f( N* m5 W, p3 x' T
  1. <div style="color: green; font-size: 30px;">菜鸟教程</div>
复制代码
也可以直接绑定到一个样式对象,让模板更清晰:
实例 82 k9 V! h* @( C9 p" y3 P6 p
4 y! n$ ~( l6 ^7 V
  1. <div id="app">
    3 h3 V  W& _- A- L4 \% Z% J( s
  2.   <div v-bind:style="styleObject">菜鸟教程</div>
    : s0 n2 e: D! ~" h7 C! P
  3. </div>
复制代码
v-bind:style 可以使用数组将多个样式对象应用到一个元素上:
实例 9; j$ s' J( P* s9 z7 J6 l9 U1 ^2 l

3 H) [' [0 ?5 ?" ]
  1. <div id="app">
      F  V, o+ v8 m, ], Q  k
  2.   <div v-bind:style="[baseStyles, overridingStyles]">菜鸟教程</div>
    9 F3 W. g/ c5 h/ M/ s
  3. </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