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

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

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

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

class 属性绑定
我们可以为 v-bind:class 设置一个对象,从而动态的切换 class:
实例 1
实例中将 isActive 设置为 true 显示了一个绿色的 div 块,如果设置为 false 则不显示:

4 ~% \" z) T0 \; C/ `9 u0 J
6 N- k) ^& W  s
  1. <div v-bind:class="{ active: isActive }"></div>
复制代码
以上实例 div class 为:
& m3 i$ z% O, ?0 @+ A7 r7 q% w
  1. <div class="active"></div>
复制代码
我们也可以在对象中传入更多属性用来动态切换多个 class 。
实例 2
text-danger 类背景颜色覆盖了 active 类的背景色:

- `" y$ q, O: p' w+ R' J
1 B# o6 g5 r& R5 J( }, z% ~9 y
  1. <div class="static". R6 I* C8 q8 v6 ~
  2.      v-bind:class="{ active: isActive, 'text-danger': hasError }">
    ; @" _" W  ?: @6 `) f. t7 y
  3. </div>
复制代码
以上实例 div class 为:
& R2 |- F3 z+ E3 D2 b/ K
  1. <div class="static active text-danger"></div>
复制代码
我们也可以直接绑定数据里的一个对象:
实例 3
text-danger 类背景颜色覆盖了 active 类的背景色:

8 B! d# h4 s. n- m' x: [  ?
- I& F2 @' i; ]+ ^& t
  1. <div id="app">9 V5 T, B5 u* n$ C9 ~
  2.   <div v-bind:class="classObject"></div>
    , \# E9 k& W0 J% Q
  3. </div>
复制代码
实例 3 与 实例 2 的渲染结果是一样的。
此外,我们也可以在这里绑定返回对象的计算属性。这是一个常用且强大的模式:
实例 4
* g0 J- M8 s" g* M/ x
9 z1 p# c* N' W- c& N# |
  1. new Vue({! g, S4 G; r2 P8 O
  2.   el: '#app',
    $ T0 @2 d6 s: J$ d$ l( }1 I0 V3 b
  3.   data: {
    % L( L1 ~$ V; I2 j: v
  4.   isActive: true,! U4 e/ ^' ]- I% Y! R* x- z
  5.   error: null& `6 N% ]* Z, U6 y' P" D
  6.   },
    7 g% m! R( p( h/ F4 k
  7.   computed: {
    6 E0 w# A' u: w' q
  8.     classObject: function () {
    " E# }# X5 r7 G) n
  9.       return {
    ! L. S- z) W6 Y: T9 O4 O3 |
  10.         active: this.isActive && !this.error,
    7 [1 c; l4 P/ M( \* `0 _
  11.         'text-danger': this.error && this.error.type === 'fatal',4 a8 I: K( X! }6 i7 t+ h
  12.       }  i. i/ y* x3 b
  13.     }
    " |5 t$ M) \; x
  14.   }- G! U! c: n) ^* A
  15. })
复制代码
数组语法
我们可以把一个数组传给 v-bind:class ,实例如下:
实例 5
: Q' _- u# _' W, h% V2 n, X  ?6 V5 d2 D- M' t. d1 c7 E& ?
  1. <div v-bind:class="[activeClass, errorClass]"></div>
复制代码
以上实例 div class 为:: E; L# t( |& T, C/ x5 P
  1. <div class="active text-danger"></div>
复制代码
我们还可以使用三元表达式来切换列表中的 class :
实例 6
errorClass 是始终存在的,isActive 为 true 时添加 activeClass 类:

5 i, _7 D4 O4 q' i9 R4 x9 _( d% v$ E
  1. <div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
复制代码

2 Y4 x: ^/ F0 G* W" H/ e
2 A4 K% s* w# B3 o  C) ~! AVue.js style(内联样式)
我们可以在 v-bind:style 直接设置样式:
实例 7
2 ~6 F- H9 s; q
+ D, ^8 X: b5 u# ?+ r7 Y! K8 U
  1. <div id="app">! g9 c  n" `( C, }1 ?( Z
  2.     <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>& Z4 l$ k; ?0 ]" A% \
  3. </div>
复制代码
以上实例 div style 为:
# h) P7 F  p$ a9 w
  1. <div style="color: green; font-size: 30px;">菜鸟教程</div>
复制代码
也可以直接绑定到一个样式对象,让模板更清晰:
实例 8
+ m% B# o1 L2 k/ I: P3 \( m$ s) R7 f' X* C. y+ e2 C% H4 e* j0 x
  1. <div id="app">
      c4 c4 k+ e9 S6 P7 Z
  2.   <div v-bind:style="styleObject">菜鸟教程</div>
    : ~( O5 ?4 Y0 b  Z7 z" {9 q
  3. </div>
复制代码
v-bind:style 可以使用数组将多个样式对象应用到一个元素上:
实例 9% s3 v9 y. Q% Z6 j! ?
. o3 S4 m: |! J4 p' F. ?
  1. <div id="app">
      h3 {. o( \! K- p% F5 y+ U
  2.   <div v-bind:style="[baseStyles, overridingStyles]">菜鸟教程</div>
    & G& T- M8 ]  ^6 N
  3. </div>
复制代码

3 [# m9 [* v4 ]& r# H! }* F8 D  _5 R2 X, v3 u& L! A
注意:当 v-bind:style 使用需要特定前缀的 CSS 属性时,如 transform ,Vue.js 会自动侦测并添加相应的前缀。# z8 [# U* k7 ?

+ d# |2 V/ f2 [# i6 b# e0 X, W5 l# C, p  O6 ]4 }

' L# m, t6 G/ K6 ~7 Q8 \- Z! E% F
7 F. {, A" l2 C: k
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-3-17 21:47 , Processed in 0.064679 second(s), 22 queries .

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