cncml手绘网

标题: Vue.js 样式绑定 [打印本页]
作者: admin    时间: 2018-7-4 11:12
标题: Vue.js 样式绑定

5 `$ s: t4 d+ U$ ~" I( @Vue.js class
class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。
Vue.js v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。
class 属性绑定
我们可以为 v-bind:class 设置一个对象，从而动态的切换 class:
实例 1
实例中将 isActive 设置为 true 显示了一个绿色的 div 块，如果设置为 false 则不显示：

% s3 l5 s; U1 J& O% u
8 I+ s( Y+ d0 ?0 F; Q" v  H
  1. <div v-bind:class="{ active: isActive }"></div>
复制代码
以上实例 div class 为：5 u* ~$ T4 g/ `( g* [) ^; R2 K- A
  1. <div class="active"></div>
复制代码
我们也可以在对象中传入更多属性用来动态切换多个 class 。
实例 2
text-danger 类背景颜色覆盖了 active 类的背景色：
# M) B. x  b- P/ h; k
+ [* U7 w/ G7 K" w" v. I& T
  1. <div class="static"$ V. o: C! A7 f  @0 _$ A/ _/ m& z
  2.      v-bind:class="{ active: isActive, 'text-danger': hasError }">
    + e) L- u* ]) B7 D& r
  3. </div>
复制代码
以上实例 div class 为：
' C" {6 {: @) Z5 C5 E/ l3 }, G7 @
  1. <div class="static active text-danger"></div>
复制代码
我们也可以直接绑定数据里的一个对象：
实例 3
text-danger 类背景颜色覆盖了 active 类的背景色：

  W* O2 @- k/ q, x0 Z
) A& U0 v6 E' u2 T; G. M1 S
  1. <div id="app">
    + Y7 s/ i, u( Y% s  V
  2.   <div v-bind:class="classObject"></div>9 J+ {3 `, l) U% t
  3. </div>
复制代码
实例 3 与 实例 2 的渲染结果是一样的。
此外，我们也可以在这里绑定返回对象的计算属性。这是一个常用且强大的模式：
实例 42 }- B6 g/ w3 g. g+ b
0 E' k8 O8 ~+ L# [8 v3 B$ p) j3 e
  1. new Vue({
    0 c7 K9 i8 e( ?& K: U9 b7 Z4 `4 u
  2.   el: '#app'," _* A4 s) b0 q% S
  3.   data: {7 R; ^1 t  Y  \! O  n7 H
  4.   isActive: true,- l& N+ L" F- \7 ^
  5.   error: null8 j7 ~# R/ H3 F/ _; K
  6.   },& l6 Y! z1 n( F/ }4 U( ]
  7.   computed: {" {- f0 |% j7 z/ z
  8.     classObject: function () {  b  t7 F3 p% X% d
  9.       return {
    3 t: Y( I' p" f& D
  10.         active: this.isActive && !this.error," \* s* G! e7 Z6 Y! Q$ f
  11.         'text-danger': this.error && this.error.type === 'fatal',
    ) w0 M* x% _  u9 p' H# B! h
  12.       }
    . r6 ]. L4 [% h8 U* u# I
  13.     }
    , {; F8 h, s& T4 x+ D) v$ ]+ r
  14.   }
    5 P5 Q/ Y$ z+ o1 g+ E
  15. })
复制代码
数组语法
我们可以把一个数组传给 v-bind:class ，实例如下：
实例 5
6 h1 l6 w6 m' j8 w& I/ e
- `, c. W2 {8 }7 K7 N4 j
  1. <div v-bind:class="[activeClass, errorClass]"></div>
复制代码
以上实例 div class 为：
2 P+ T! T* x1 Y: r. n
  1. <div class="active text-danger"></div>
复制代码
我们还可以使用三元表达式来切换列表中的 class ：
实例 6
errorClass 是始终存在的，isActive 为 true 时添加 activeClass 类：

( C- y; i; v9 ]/ W* D  H/ x) }; `. Z1 `0 n/ Y
  1. <div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
复制代码

6 M# p7 w( l( y8 H
) f4 ^5 C  R) k' ?Vue.js style(内联样式)
我们可以在 v-bind:style 直接设置样式：
实例 7
( y" o6 }0 g7 E$ Z& n, U- F) b5 D9 ]* X
  1. <div id="app">
    / R/ B% Y0 Q$ |3 [3 V; v
  2.     <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>1 Y5 M& ?& [$ M( V9 n/ v+ T6 H
  3. </div>
复制代码
以上实例 div style 为：7 }8 v* J. d. J/ [: k+ Y
  1. <div style="color: green; font-size: 30px;">菜鸟教程</div>
复制代码
也可以直接绑定到一个样式对象，让模板更清晰：
实例 8
6 Z2 x; E) W/ X; I- `
3 l' m) s* b( r1 F
  1. <div id="app">
    - a2 k& q# ]% C6 \( h2 O. H1 F6 E- _
  2.   <div v-bind:style="styleObject">菜鸟教程</div>
    . k: `7 c4 @( P' o
  3. </div>
复制代码
v-bind:style 可以使用数组将多个样式对象应用到一个元素上：
实例 9
9 ^+ o& j3 Z$ g9 `% ]
6 z; |0 [) B# N, D$ B* b
  1. <div id="app">* d8 z& @: s( \- f) b6 Y
  2.   <div v-bind:style="[baseStyles, overridingStyles]">菜鸟教程</div>
    ) ]! y' x4 o7 b. d* j3 y5 L
  3. </div>
复制代码
1 g" k4 X1 X( w7 v: g! A

& K1 U/ t- C. u  e5 D8 z- k注意：当 v-bind:style 使用需要特定前缀的 CSS 属性时，如 transform ，Vue.js 会自动侦测并添加相应的前缀。' e7 B! k: x' Z

, ~# b* G" s/ L. D# E4 ?
5 ]; K: `6 [. j2 e  H6 ]4 M3 r. v7 z$ l8 ~

- m/ |' _) a; P( M- y6 J+ D



欢迎光临 cncml手绘网 (http://bbs.cncml.com/) Powered by Discuz! X3.2