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

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

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

[复制链接]
跳转到指定楼层
楼主
发表于 2018-7-4 11:12:07 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

2 e7 ^) u$ 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 则不显示:
' D3 q* Z' Y/ o4 G+ F
$ M  ^) G- k4 V' ^- V
  1. <div v-bind:class="{ active: isActive }"></div>
复制代码
以上实例 div class 为:
1 j, n1 |! X' }! ]1 A( @8 }
  1. <div class="active"></div>
复制代码
我们也可以在对象中传入更多属性用来动态切换多个 class 。
实例 2
text-danger 类背景颜色覆盖了 active 类的背景色:

# u* ~( @* ~6 i! [
& n$ S# |, h; C- J- B; k& S! C% }
  1. <div class="static"
    2 \+ s, I0 c9 Q8 @
  2.      v-bind:class="{ active: isActive, 'text-danger': hasError }">
    ! o/ q, O% @) g
  3. </div>
复制代码
以上实例 div class 为:
8 j9 \! h5 {2 M4 j! D+ r, b: z; d
  1. <div class="static active text-danger"></div>
复制代码
我们也可以直接绑定数据里的一个对象:
实例 3
text-danger 类背景颜色覆盖了 active 类的背景色:

" G: o$ p8 p2 F2 U* U% {! r) M( F  Q4 f* t
  1. <div id="app">
    - b0 K5 k8 U5 k1 a1 y: m+ f0 p3 x
  2.   <div v-bind:class="classObject"></div>
    2 z& M$ W$ P( B7 a$ V5 d- K
  3. </div>
复制代码
实例 3 与 实例 2 的渲染结果是一样的。
此外,我们也可以在这里绑定返回对象的计算属性。这是一个常用且强大的模式:
实例 4
' B  f: o- S+ ~% F1 R0 \
4 k7 i0 E$ u8 Z
  1. new Vue({9 a- v$ y" s0 p3 K2 ]1 I
  2.   el: '#app',! B8 T! T/ L7 l, p
  3.   data: {
    . \" q! x4 V0 h" F: T  U' o, ?0 f# ]) j
  4.   isActive: true,
    ' ~7 \" _. Z3 Y) Q
  5.   error: null$ N5 w6 E5 C* Y* V# f$ z
  6.   },8 {) J- k  g: `# U3 N& S+ m
  7.   computed: {# g  s! i  W- @7 t( k5 ]
  8.     classObject: function () {9 e$ q, a% T8 f7 G
  9.       return {
    8 l* B; l6 K# J6 V; d$ r& `- x
  10.         active: this.isActive && !this.error,$ {+ h: x2 r/ _0 g/ F3 o
  11.         'text-danger': this.error && this.error.type === 'fatal',  ~* i" |6 x4 Q$ B
  12.       }/ o+ Y4 G: j4 m8 b6 E6 M
  13.     }
    3 L" V3 X& ?3 V& j  h
  14.   }
    ) a, I" B) u+ A
  15. })
复制代码
数组语法
我们可以把一个数组传给 v-bind:class ,实例如下:
实例 55 \0 {" w2 Q( y' Y

1 w; E! R' a* p8 S
  1. <div v-bind:class="[activeClass, errorClass]"></div>
复制代码
以上实例 div class 为:
5 Y" d3 B+ ?* P4 ]* y
  1. <div class="active text-danger"></div>
复制代码
我们还可以使用三元表达式来切换列表中的 class :
实例 6
errorClass 是始终存在的,isActive 为 true 时添加 activeClass 类:

  f- T5 o+ Q0 _' Y9 h! ^% s# v* N* X$ [7 v0 P! [. y
  1. <div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
复制代码
. O* y8 x/ |- g2 u
: i! P, y, X0 x2 w
Vue.js style(内联样式)
我们可以在 v-bind:style 直接设置样式:
实例 7+ R' K& t) d7 q: B5 W& f

* T$ t7 }' D8 Z& n1 a; J
  1. <div id="app">8 r4 H. P0 B4 D
  2.     <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>0 I$ y' U+ b5 K! z( \( L
  3. </div>
复制代码
以上实例 div style 为:
7 `% U/ N7 t' ^% s2 H$ d) d0 _. g2 f
  1. <div style="color: green; font-size: 30px;">菜鸟教程</div>
复制代码
也可以直接绑定到一个样式对象,让模板更清晰:
实例 83 q# d% \0 `: J6 v) H; y/ x

7 N3 U$ ~- L1 A
  1. <div id="app">( k5 l" _9 `, j$ c/ E) S
  2.   <div v-bind:style="styleObject">菜鸟教程</div>. _) [5 t! D, M. O7 y( ~" j" {* y
  3. </div>
复制代码
v-bind:style 可以使用数组将多个样式对象应用到一个元素上:
实例 9! T3 H# |+ l8 i
* Q6 a( @% C- f/ {7 ^# m
  1. <div id="app">
    * Z4 S" O# S# [' D% d; e* }
  2.   <div v-bind:style="[baseStyles, overridingStyles]">菜鸟教程</div>
    ! t3 V9 K: ?1 B6 }2 x
  3. </div>
复制代码

- A4 X$ H" ]; A9 a0 g( z" f
) I- ^& c4 O0 Y- d& J" x注意:当 v-bind:style 使用需要特定前缀的 CSS 属性时,如 transform ,Vue.js 会自动侦测并添加相应的前缀。, w% V4 d9 X% w
1 A* v, A' q7 G, K9 ^% V! w/ S+ H

% u2 K" a0 Q; ]% e5 S1 F( T: f' V7 ^  ^" V1 x- `" F) S; P- x! P

& e: x5 m- @0 [% L: C6 W2 s* ]+ v- d
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-8-4 14:26 , Processed in 0.074022 second(s), 19 queries .

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