条件判断v-if 条件判断使用 v-if 指令: v-if 指令在元素 和 template 中使用 v-if 指令: - <div id="app">& }) E7 L5 N% H; b ~
- <p v-if="seen">现在你看到我了</p>
+ v. B5 i# \! T8 U - <template v-if="ok">6 p4 p0 T; M7 |- N; n0 L+ |0 D
- <h1>菜鸟教程</h1>$ V6 i& T; u( U+ p* X' |' O
- <p>学的不仅是技术,更是梦想!</p>
( @" j2 r2 ]; E1 @ - <p>哈哈哈,打字辛苦啊!!!</p>
; N, |, J5 U" C$ A - </template>
. q* q7 ?) B( p' ]* C1 K- U. p - </div>
) |& `2 k* L2 a -
_, x4 R4 _2 s) w% V - <script>
% Z1 q6 L: k# E+ L5 u% u$ | - new Vue({
+ g1 c5 s7 [8 U& j - el: '#app',0 ^, s9 [" X( s0 C+ |
- data: {% c! j" T, E4 K! ]7 L1 H
- seen: true,
r8 V0 g* [$ E3 B5 X' R& g. \& Z( A - ok: true
3 t3 z, A. s" h% T - }/ `# `) y+ u) z( W* Y; |, t
- })
. h1 r; c% Q# ~& J - </script>
复制代码 , d5 M6 H1 I, m" S5 X8 V) K
这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。 在字符串模板中,如 Handlebars ,我们得像这样写一个条件块: - <!-- Handlebars 模板 -->
* \6 i: ~; S* B6 |2 y - {{#if ok}}
& x3 f4 I+ d* S8 o7 ^* {: y - <h1>Yes</h1>
2 J7 I* @) x6 [9 N+ T - {{/if}}
复制代码 v-else可以用 v-else 指令给 v-if 添加一个 "else" 块: v-else 指令随机生成一个数字,判断是否大于0.5,然后输出对应信息: 2 I. y! m( @0 S+ p) N7 `0 h
- <div id="app">8 T9 N( p3 ?1 W" P/ H& O( i
- <div v-if="Math.random() > 0.5">
! c" E/ j7 L8 z0 t - Sorry
7 s. c8 @8 [. A, v2 w) C$ X3 L; i - </div>
$ z1 d1 r, Y) @8 Q* _: x7 A - <div v-else>
; m, u1 G! B" Q+ B! |+ m7 O i - Not sorry
$ F+ U Y. Y& H- u* i - </div>
9 b/ b. q9 O1 G( a4 T - </div>- e8 h8 ]7 B5 |' { L3 `& d
- # e1 @. V/ D9 Q- o
- <script>
7 Q1 A4 z3 l; K' f" ? - new Vue({
, ~8 F# Z2 n5 u+ ~ - el: '#app'
4 q2 d! u& O! V% m8 e* ^) ^$ S - })
. N5 _" p9 o; U% o - </script>
复制代码 v-else-ifv-else-if 在 2.1.0 新增,顾名思义,用作 v-if 的 else-if 块。可以链式的多次使用: v-else 指令判断 type 变量的值:
9 O! J, n* i( j* q" Z7 M/ D" I- <div id="app">) i, b8 Z6 `( }. ^& W6 M7 N
- <div v-if="type === 'A'">
0 M; V( h" F; J- r% p/ j - A% M4 m0 W! c8 B6 T" I0 o+ I9 J
- </div>( U0 |% {1 I9 G3 ^- G; F! Y/ m
- <div v-else-if="type === 'B'">
) m6 Q0 |1 }9 W$ h* H: ]: K - B
; p1 G! P: E7 z4 D - </div>
+ u8 H. B, E* l4 f. z- l& Q& Q - <div v-else-if="type === 'C'">7 z) D: @, m8 N( J2 D6 @0 Z% A
- C
3 I0 P$ p$ \* K2 O - </div>7 b- q! t: B! a) I7 F3 \/ ?
- <div v-else>
7 l1 a6 Q$ O4 k8 \ [5 E- \ - Not A/B/C" ^- |2 g) v+ `9 p2 L* m @# M- s
- </div>$ H2 ~2 Q- e& D8 @
- </div>
5 W; t; `- h/ ?& i2 S- f" v - + l1 t, |% v4 E; G$ v4 D k
- <script>
5 D/ v* y# o/ c$ Y' s - new Vue({# [9 a! p% j# B4 ^# I! p
- el: '#app',: N4 `, p: U& x: i9 g' j# U$ H" e
- data: {
2 V; x1 ~% a) `# p' S - type: 'C'
, ?7 G6 d) m) |: I0 L: v$ R - }
& l7 n! t8 G" L* i# \* F9 k8 Z$ J- L - })- |9 I; e. D# @! L- r$ n( Q
- </script>
复制代码
' z" m% i! M$ ~0 p' u; j- d# Mv-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。 v-show我们也可以使用 v-show 指令来根据条件展示元素: v-show 指令9 m) l: r% w% E6 |/ _5 t5 l
- <h1 v-show="ok">Hello!</h1>
复制代码 ! u( i; t9 s" z
2 @0 k( N, F; E W+ i% v# T
* P& I/ C, s: N
: `& z! N6 G: U, F" D3 @/ t |