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

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

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

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

/ Z( \" T$ d% j& k* z# |% R' HVue.js class
class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性。
Vue.js v-bind 在处理 class 和 style 时, 专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组。

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

# B8 S7 S, a2 @4 Z  s
& u* L3 S! r. ?: {. g% D; l
  1. <div v-bind:class="{ active: isActive }"></div>
复制代码
以上实例 div class 为:
2 U" E. |' q/ m0 w, L* u
  1. <div class="active"></div>
复制代码
我们也可以在对象中传入更多属性用来动态切换多个 class 。
实例 2
text-danger 类背景颜色覆盖了 active 类的背景色:

& ~* Q6 m$ |5 ^$ x4 q" a
1 t, u- R; s7 b; J3 K
  1. <div class="static"5 w$ ~1 f! ]. `! {
  2.      v-bind:class="{ active: isActive, 'text-danger': hasError }">. K9 a/ B% n% X
  3. </div>
复制代码
以上实例 div class 为:( b0 l4 T& ~3 c9 y, }
  1. <div class="static active text-danger"></div>
复制代码
我们也可以直接绑定数据里的一个对象:
实例 3
text-danger 类背景颜色覆盖了 active 类的背景色:
2 `) R7 u9 c' y; Z0 \4 f; J
8 s6 B' z9 L. N% M
  1. <div id="app">6 o5 r' U9 h* {) ~  O
  2.   <div v-bind:class="classObject"></div>
    ; \& b/ Y: ^# P+ W( E9 H
  3. </div>
复制代码
实例 3 与 实例 2 的渲染结果是一样的。
此外,我们也可以在这里绑定返回对象的计算属性。这是一个常用且强大的模式:
实例 4
7 r/ h! B; q  b$ S* _3 C2 j
( K4 l' ]; l% G+ D( A
  1. new Vue({
    2 z9 L1 G7 v6 |$ d; I' ?% i
  2.   el: '#app',
    4 g) R1 G1 p" `( _
  3.   data: {
    % m/ o4 b, ~% b6 \3 w* A
  4.   isActive: true,, ?* q7 B. Y0 F
  5.   error: null  G5 e  D/ q4 m3 X" N: L- ?
  6.   },
    % x, t* `3 k0 }' y
  7.   computed: {
    2 n0 W9 V; _2 P" L; P' v
  8.     classObject: function () {; a6 P; H  _+ v: y/ F. b/ k9 t
  9.       return {3 h( e& k7 d3 i. L
  10.         active: this.isActive && !this.error,
    5 ^, V7 ~& B2 Y
  11.         'text-danger': this.error && this.error.type === 'fatal',
    + C& i) N- P4 ^3 n
  12.       }
    / L+ Y! [* e" r8 q0 S0 [
  13.     }
    8 S! y2 K$ l4 _. d/ t* U
  14.   }
    - X7 c- K& ?& l& ?% V' X& T
  15. })
复制代码
数组语法
我们可以把一个数组传给 v-bind:class ,实例如下:
实例 55 U9 ?2 G% r5 u6 L$ }0 W, g' p9 @2 h
8 v  d' F) R( R' D( I
  1. <div v-bind:class="[activeClass, errorClass]"></div>
复制代码
以上实例 div class 为:
* z, V+ g$ [$ U8 e$ c% a
  1. <div class="active text-danger"></div>
复制代码
我们还可以使用三元表达式来切换列表中的 class :
实例 6
errorClass 是始终存在的,isActive 为 true 时添加 activeClass 类:
# a+ Z, i- C: z) v$ i

4 }* l, G0 K4 v! e. i( H
  1. <div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
复制代码

8 }0 K3 C, j) i7 o* |4 G
$ g6 O4 t2 f! l8 R2 n; hVue.js style(内联样式)
我们可以在 v-bind:style 直接设置样式:
实例 7. C6 c. R7 a  w7 {3 X

& f$ C' k" y% p
  1. <div id="app">, _# W& V5 ~* c2 q# t
  2.     <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>
    4 |% b7 S) t0 S, ^
  3. </div>
复制代码
以上实例 div style 为:
* e8 p) `5 d1 s" }
  1. <div style="color: green; font-size: 30px;">菜鸟教程</div>
复制代码
也可以直接绑定到一个样式对象,让模板更清晰:
实例 86 c3 Q3 T: t' ]  J" e* u7 E& L
4 o. R& a0 [# `: _0 r, B
  1. <div id="app">; Q4 ^) G4 ]3 x/ P9 D
  2.   <div v-bind:style="styleObject">菜鸟教程</div>
    8 W8 _% u0 W( v: _" `& p6 W6 Z2 Y
  3. </div>
复制代码
v-bind:style 可以使用数组将多个样式对象应用到一个元素上:
实例 97 g: k( c2 r+ n9 X

& X2 b+ @; t6 K7 B* z) K: H
  1. <div id="app">6 e- B, ]/ S* F
  2.   <div v-bind:style="[baseStyles, overridingStyles]">菜鸟教程</div>
    4 a$ d: b; T- P
  3. </div>
复制代码

# }* a1 H# n. D! X2 k4 d
; n, f$ ~1 b* n0 B$ Z* G注意:当 v-bind:style 使用需要特定前缀的 CSS 属性时,如 transform ,Vue.js 会自动侦测并添加相应的前缀。
8 d4 V$ u, M; |- o
" q( K) M2 w# ^( a. b' ^
5 t/ Y) C8 m+ f6 _: M$ ^4 _. S; B& z% M# f4 j
% R+ \4 a. ~9 A! s1 L, ~
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

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