|
条件判断v-if 条件判断使用 v-if 指令: v-if 指令在元素 和 template 中使用 v-if 指令: - <div id="app">
/ e \6 p5 Y' f. B) ` - <p v-if="seen">现在你看到我了</p>2 J# p m$ D/ O
- <template v-if="ok">6 w& ~" n0 S) t
- <h1>菜鸟教程</h1>
6 {. o! s3 i+ g! J& R - <p>学的不仅是技术,更是梦想!</p>! D7 v& P! u! `* p$ Z4 ]7 d
- <p>哈哈哈,打字辛苦啊!!!</p>
7 p5 } t# V4 A% H- F5 q& t/ U: L - </template>& s3 `! `" ]+ @1 c0 {; V
- </div>
5 Z6 |( q. q, Z4 p -
+ C. D z. D) I0 _5 W" J, W - <script>& v* O8 c+ Z/ F5 d# Q
- new Vue({% `* n5 U V6 ]% ]4 s3 ~
- el: '#app',
: l# {) d+ g J! L. W( x - data: {0 j7 ]7 k) W1 e& |% y/ \% x
- seen: true,
; O. w8 Y* h8 ~; f6 x7 n" a% g& z - ok: true4 |# i- m# b1 q
- }. j5 \4 g- u" r9 D+ r
- })) X; g3 k( o; e. [
- </script>
复制代码
: e/ e" l- V7 v2 D# {, Q" w这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。 在字符串模板中,如 Handlebars ,我们得像这样写一个条件块: - <!-- Handlebars 模板 -->. N w- ~& ^5 K- x, D9 D
- {{#if ok}}# [' ^' m( x0 Y
- <h1>Yes</h1>5 P; y5 c; B, N! Q1 q, c$ E# N( E
- {{/if}}
复制代码 v-else可以用 v-else 指令给 v-if 添加一个 "else" 块: v-else 指令随机生成一个数字,判断是否大于0.5,然后输出对应信息: ) Z' i1 _, d; d; {' {- |) v
- <div id="app">
* C9 _+ J* O$ ?# B1 `+ u+ C. M( C( c, u - <div v-if="Math.random() > 0.5">+ [2 F Q, O" r+ c5 ?* f$ R2 ]
- Sorry
, d: Q6 z9 Z5 T* e l& `& o y - </div>, f2 r7 U. d, F+ w
- <div v-else>4 I2 i9 G; Z A- D1 X0 H
- Not sorry
3 b' s) y' W% Y7 Z0 p; h+ e - </div>
0 e' T) O$ B9 `8 P( L( k# I4 L - </div>
( V. L3 Z5 I2 @4 J6 \ -
. j, u4 {. Q. a3 C+ O - <script>7 v& F4 V4 f2 ~3 `/ m1 T+ z9 S
- new Vue({7 S- }6 i7 g* Y0 {
- el: '#app'" @5 ]& j9 S, [6 N9 k' Y
- })1 E, ~$ ^3 A- w7 C3 O w
- </script>
复制代码 v-else-ifv-else-if 在 2.1.0 新增,顾名思义,用作 v-if 的 else-if 块。可以链式的多次使用: v-else 指令判断 type 变量的值: - {# P& a* ?! ^4 F
- <div id="app">
$ M4 O4 T/ j: \9 @: g; x) k - <div v-if="type === 'A'">
1 x$ u5 k( b; [' B1 t5 O3 L3 j - A" K$ z, S7 `4 _7 {$ X! x/ m* M
- </div>
4 F [3 Q1 l( S; g. u } - <div v-else-if="type === 'B'">0 s4 m) A O3 Y V- L9 @& n
- B1 V s, C$ s8 Y1 u8 ]
- </div>
1 u7 c8 D; o/ b/ ^. V - <div v-else-if="type === 'C'">
1 P8 N! u) f# ]. H' {$ s% ^ - C
& z3 G* `# f* l5 _0 w4 y. y7 k0 E - </div>; W& ^/ x# x0 d+ Q. M9 m
- <div v-else>
! I0 j" x$ g% K* Y - Not A/B/C5 O7 D& i: f5 C
- </div>
; X# l* | c& m" S - </div>
/ ` ~! ^- z+ h4 t$ k0 H+ t - ) v9 f# R( v$ P$ |' n# b2 O: x7 P$ ^; [4 ~
- <script># y) a. I4 k" d& C8 V$ q6 Z( I
- new Vue({8 g- e N1 H o V) k$ M
- el: '#app',
: O5 W/ q8 s% B! u& u8 } - data: {
6 j( t# l* b% u" [! Z0 z( L - type: 'C'
' h+ A4 K+ @) J - }5 s' ~# A1 B7 |( n8 _0 L& x0 P; `3 q
- })
! {# g, n# n" F - </script>
复制代码
) Q( Q1 A* p4 J" o" V- |v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。 v-show我们也可以使用 v-show 指令来根据条件展示元素: v-show 指令
8 f+ l8 a. f7 w3 o y- <h1 v-show="ok">Hello!</h1>
复制代码
( z, i5 e0 [; z/ v9 \; L: I1 f
9 k1 m( b M+ n' t! y4 P
' f4 k9 r$ b2 I) z0 c3 V; {% v3 M6 N6 h4 s1 h1 h
|