您尚未登录,请登录后浏览更多内容! 登录 | 立即注册

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 15277|回复: 0
打印 上一主题 下一主题

[Vue.js] Vue.js 样式绑定

[复制链接]
跳转到指定楼层
楼主
发表于 2018-7-4 11:12:07 | 只看该作者 回帖奖励 |正序浏览 |阅读模式
# H! L$ p! n: h  A$ R) t4 X3 O3 S5 I3 p  F
Vue.js class
class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性。
Vue.js v-bind 在处理 class 和 style 时, 专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组。

class 属性绑定
我们可以为 v-bind:class 设置一个对象,从而动态的切换 class:
实例 1
实例中将 isActive 设置为 true 显示了一个绿色的 div 块,如果设置为 false 则不显示:
! P8 L1 k- `; e# C  x4 q% t0 p; O

# Z9 C8 v2 l# ]  ]; j8 ~
  1. <div v-bind:class="{ active: isActive }"></div>
复制代码
以上实例 div class 为:
$ Q7 T) h: A$ R2 f
  1. <div class="active"></div>
复制代码
我们也可以在对象中传入更多属性用来动态切换多个 class 。
实例 2
text-danger 类背景颜色覆盖了 active 类的背景色:

' V) s( N- d, Y
; B! H1 ]: t) r# e2 X
  1. <div class="static"+ [/ e( G5 M: R
  2.      v-bind:class="{ active: isActive, 'text-danger': hasError }">, W$ P5 f5 a8 W7 K
  3. </div>
复制代码
以上实例 div class 为:
+ y  ?) j' l  @/ D% a
  1. <div class="static active text-danger"></div>
复制代码
我们也可以直接绑定数据里的一个对象:
实例 3
text-danger 类背景颜色覆盖了 active 类的背景色:
9 u7 M& z0 g) L) O1 a

+ Q' U  {; C1 }. r$ ~1 M% r  C
  1. <div id="app">
    ) M3 W7 r( E0 M9 s5 W4 P0 \
  2.   <div v-bind:class="classObject"></div>
    ; d) R( ^* I: C' C& q
  3. </div>
复制代码
实例 3 与 实例 2 的渲染结果是一样的。
此外,我们也可以在这里绑定返回对象的计算属性。这是一个常用且强大的模式:
实例 4
/ y% p6 U( u. u- N! |  y
* ^, z5 c' O, L; B4 O1 V) Z
  1. new Vue({
    & I2 q# _  T$ O, ~" o7 m8 `( c
  2.   el: '#app',
    + x' i. y$ m) U  E
  3.   data: {% u" {- K, F) j2 b' Z* X- {' g% \/ f
  4.   isActive: true,
    0 l2 [  Z9 V) h7 j4 W
  5.   error: null
    5 I4 n3 I4 \  l
  6.   },
    $ d6 q$ ], P" I8 a2 Q" m
  7.   computed: {9 G9 H( I, L4 N. C: F' }8 R* @
  8.     classObject: function () {& d% h& o1 D: g
  9.       return {
    : a' p+ X7 j9 X& ~
  10.         active: this.isActive && !this.error,
    ! ]% v- j& V' e$ D
  11.         'text-danger': this.error && this.error.type === 'fatal',& @; A7 n+ t1 V/ P: P" M) m  W
  12.       }
    7 V1 `* `, K; r" i
  13.     }
    $ i1 l8 s4 q0 `5 [% e
  14.   }; \& @! K( U& S6 m! I, e) s- A
  15. })
复制代码
数组语法
我们可以把一个数组传给 v-bind:class ,实例如下:
实例 5) h! N# N  ^5 k3 l  ]7 }5 G& a* W9 {# P
! `/ |# F. a# `  O) Z
  1. <div v-bind:class="[activeClass, errorClass]"></div>
复制代码
以上实例 div class 为:; c! @, k! S1 m! ]8 n4 ]
  1. <div class="active text-danger"></div>
复制代码
我们还可以使用三元表达式来切换列表中的 class :
实例 6
errorClass 是始终存在的,isActive 为 true 时添加 activeClass 类:
9 R# M- k! `/ [5 |# G
  c" j! P- X4 p0 J3 u1 b- K
  1. <div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
复制代码
( {8 i2 e, E+ b6 x! c

' d4 I) h4 A" V( Y/ K& Q+ [! uVue.js style(内联样式)
我们可以在 v-bind:style 直接设置样式:
实例 7
6 f$ K! w: ?+ P. z& i
2 w4 C* e. E3 w  [4 q% n6 U
  1. <div id="app">
    , l5 T& ^! C# P! o. n$ B( ]
  2.     <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>- g8 K3 j; r. Q8 M7 S/ F
  3. </div>
复制代码
以上实例 div style 为:1 \' ^- {% `* S: S7 G
  1. <div style="color: green; font-size: 30px;">菜鸟教程</div>
复制代码
也可以直接绑定到一个样式对象,让模板更清晰:
实例 8! I/ r' l- r8 F2 {& R$ C
  g- Z. M) n7 _% z% e" a, c0 P* o
  1. <div id="app">  k+ G7 o# y- u
  2.   <div v-bind:style="styleObject">菜鸟教程</div>
    ; Z: E4 h  V& O3 j2 u# S% [
  3. </div>
复制代码
v-bind:style 可以使用数组将多个样式对象应用到一个元素上:
实例 9( P/ O/ }* Y+ z% N: V' b
. |; P# ^# d. Z
  1. <div id="app">
    : b7 e& B* A* \7 c" X1 }& N
  2.   <div v-bind:style="[baseStyles, overridingStyles]">菜鸟教程</div>6 k" P; F) T8 x# T* Z& {
  3. </div>
复制代码
5 S; r' B; x/ X

2 g3 C4 [+ `. Q  s! k- J注意:当 v-bind:style 使用需要特定前缀的 CSS 属性时,如 transform ,Vue.js 会自动侦测并添加相应的前缀。* Y- O8 {2 }3 J& E" o9 b8 |

  C1 ?7 d6 Z, ^
' k. ]" L6 |( [2 R$ y0 V0 w/ I0 s/ h2 l, N
: T6 i4 Z5 z, x7 W* i
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-3-17 23:07 , Processed in 0.056358 second(s), 20 queries .

Copyright © 2001-2026 Powered by cncml! X3.2. Theme By cncml!