条件判断v-if 条件判断使用 v-if 指令: v-if 指令在元素 和 template 中使用 v-if 指令: - <div id="app">
8 u4 f# Q$ t% a: Y2 @3 @ - <p v-if="seen">现在你看到我了</p>
1 B! o! n& f" f - <template v-if="ok">0 S9 Z2 J( y" G+ y# s; s
- <h1>菜鸟教程</h1>
6 U( d- v; O. c. E - <p>学的不仅是技术,更是梦想!</p>
+ Z0 i4 ^% `8 j+ S6 X! N - <p>哈哈哈,打字辛苦啊!!!</p>
% Y/ m+ o$ e8 p. M4 i+ _9 ~' t - </template>
# e5 L) Z9 O. T7 H! g/ d) { E# R - </div>
: j2 ^0 V4 g {8 \8 m7 Q6 C' s1 k - 6 v2 Y6 [& U: @. ?4 P
- <script>/ T/ }1 q% ^8 A0 z$ ~
- new Vue({
a' d% d! I! [3 M - el: '#app',/ i6 J; A2 n; v2 q. h F
- data: {
, u+ q( z) y. b3 j - seen: true,' t# W ~" H0 R
- ok: true0 C. V& Y* x$ X1 Y6 E; n, {
- }
& z" s$ l2 R/ U# j - }): O2 y& x4 O; o' W+ _- F% c- l
- </script>
复制代码 ) y, y9 `( K0 r m1 E
这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。 在字符串模板中,如 Handlebars ,我们得像这样写一个条件块: - <!-- Handlebars 模板 -->% b5 {" S0 A) Y+ X# k7 T
- {{#if ok}}8 x3 E3 v. n V6 }
- <h1>Yes</h1>
. |: K4 D4 o0 H. y - {{/if}}
复制代码 v-else可以用 v-else 指令给 v-if 添加一个 "else" 块: v-else 指令随机生成一个数字,判断是否大于0.5,然后输出对应信息: : U w5 X! Z% h/ q, [! S9 Q( l
- <div id="app">, M/ b' Q: k: d# j: z6 z; d& Z
- <div v-if="Math.random() > 0.5">
V6 K$ ]( L7 b/ P+ a - Sorry
7 T+ ^* e1 H( m9 p) b - </div>
& b! `& `8 h0 R. d - <div v-else>6 p0 V8 ?% I. h, l; }1 v1 [
- Not sorry
1 s% m$ h- W* g, a) @ - </div>4 Y. v2 a2 ?! \/ u( `
- </div>
% w% L/ B8 I* r+ K -
* b# Y+ ^: j1 o) } - <script>
& G/ ]( I1 c' d; c0 h - new Vue({# z4 {- M! S$ C3 x0 m# `
- el: '#app'
& @+ r! A8 [$ O - })
: A$ j% D1 Q7 J: C+ C4 d/ y9 a2 x - </script>
复制代码 v-else-ifv-else-if 在 2.1.0 新增,顾名思义,用作 v-if 的 else-if 块。可以链式的多次使用: v-else 指令判断 type 变量的值:
3 d1 R" d% H6 P2 l- <div id="app">
L2 g+ B8 `+ H8 }" j* c9 J - <div v-if="type === 'A'">& t* I) I* x& B
- A( N3 M& p- E7 I" Z* q2 i, e9 {" ^
- </div>
* c: i4 G. z, H7 s - <div v-else-if="type === 'B'">3 O2 D! z3 P2 h L0 c
- B7 K1 ^! j# u0 E# S& B: T+ v9 t
- </div>& G d) v& G% L, m7 h
- <div v-else-if="type === 'C'">2 M" _* F% |1 ^- e9 K7 o( U
- C. Q& I) N A+ z
- </div>
+ v6 }& ]* [# X - <div v-else>
! T3 ~% o/ W( c, L* I - Not A/B/C$ g+ w9 a% S% f7 j" T
- </div>
0 F& l( J4 y! V - </div> s& Q% H" E9 y8 V
- 0 S9 s+ H4 [ V& Y. ?
- <script>
( z( D3 g5 W# z# {. g - new Vue({ ?7 G- x" i; C3 O( S! a
- el: '#app',
+ m. ~* ~2 E" c& r% Y3 Y2 J2 B - data: {: e/ n9 c9 g4 X$ d0 H
- type: 'C': z7 r" H8 W9 L0 L
- }$ W7 e! G+ z( z% o2 @/ |
- })8 s* r, Y1 C9 y: f% D
- </script>
复制代码 ; _4 X1 F+ o: }' D. y& X) T
v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。 v-show我们也可以使用 v-show 指令来根据条件展示元素: v-show 指令* w/ Y0 Y, h# p
- <h1 v-show="ok">Hello!</h1>
复制代码 , t7 j; ~) D1 g6 M: M
* K" H+ z) G6 M. Z; S% l9 M, V0 F9 d+ m) [* \7 L/ N
- S' Y2 U" |1 Q+ y5 P% C
|