|
条件判断v-if 条件判断使用 v-if 指令: v-if 指令在元素 和 template 中使用 v-if 指令: - <div id="app">, T h3 y* ?, F; T# F) {6 ^: s
- <p v-if="seen">现在你看到我了</p>; M# L' ^( X/ k e* I. d- K3 U6 ?
- <template v-if="ok">* m/ ?* e" U7 o0 ^/ r
- <h1>菜鸟教程</h1>
. m; k* b9 f3 C6 u2 Q2 p y - <p>学的不仅是技术,更是梦想!</p>
# A$ f$ ~* U( t" |7 R$ H7 j - <p>哈哈哈,打字辛苦啊!!!</p>! ]( o0 M. V+ T0 C, s! L% C
- </template>, z( a0 @- n x0 H
- </div>
/ W8 s3 Y3 h Q5 F9 b - * B6 X X( c }) ^9 q$ f+ k
- <script>
4 i* K4 T) l6 m- K0 g% y - new Vue({
; s+ d c5 R) x9 i9 j9 ?& D - el: '#app',
9 v5 N' [+ w# D, | - data: {1 @% x, Y8 Y: t# {2 U& f
- seen: true,) j% h' f& F7 e; I- Y: H6 H6 S
- ok: true# K1 w6 Z/ U; b9 t; b% s9 l+ D
- }% N- U# L6 A, }7 c, K
- })
6 C' v1 `4 M: V" {- H - </script>
复制代码
7 D1 J& c* i8 {0 H. u这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。 在字符串模板中,如 Handlebars ,我们得像这样写一个条件块: - <!-- Handlebars 模板 -->
9 a! r, P! t1 I _( t1 z! { - {{#if ok}}
! y0 W3 g4 i# F4 q+ o - <h1>Yes</h1>% }; N, A+ S) Y9 ?
- {{/if}}
复制代码 v-else可以用 v-else 指令给 v-if 添加一个 "else" 块: v-else 指令随机生成一个数字,判断是否大于0.5,然后输出对应信息:
. }5 a+ ?4 O$ s8 B+ Z% R7 `! l- <div id="app">
# ]4 J6 j6 m: k. K2 C: U; { - <div v-if="Math.random() > 0.5">1 G5 `4 ?) o' Z2 g% R9 {
- Sorry2 P% C5 N/ _1 B' k& Q. o" G
- </div># H* K9 f5 ]( U6 R1 d/ K( I! L% B
- <div v-else>' e1 k0 q9 j7 C- \6 J8 u
- Not sorry5 g8 S' y) M; ?1 u8 s" L4 q) J" g
- </div>4 q: W( l6 Y* x+ t1 ~% ?) k
- </div>3 F& o$ U( |! A& K. U
- % \! U. @% E1 h% N+ s) i
- <script>- D3 Q5 H& {" |: o* D' M
- new Vue({
1 E/ Y$ X7 X3 R$ f* N# ]8 ` - el: '#app'
% ^& E s2 J1 s. D$ w: h - })
; a) q# ]( ]# {. Q" S, E y - </script>
复制代码 v-else-ifv-else-if 在 2.1.0 新增,顾名思义,用作 v-if 的 else-if 块。可以链式的多次使用: v-else 指令判断 type 变量的值: , W8 R+ Z+ ^( t0 U
- <div id="app">) ?1 F/ U5 l' ^6 O
- <div v-if="type === 'A'">* D! j" i$ y3 x+ g5 ~& [
- A$ X/ e$ T) s% v
- </div>
A0 p$ R. q1 E v x - <div v-else-if="type === 'B'">
8 X9 W* F1 e2 D! f$ Y2 s. t - B
5 [5 E% U9 ^ t0 } - </div>+ k$ m0 i7 m0 E) \' y5 g* j
- <div v-else-if="type === 'C'">
, k9 U4 m; L; u& Y' A2 r - C
' e b) P( A" f3 W! w5 P; S - </div>+ S' ~. K7 [! Q7 |& x
- <div v-else>
2 _& m, J; R' Z! ] S4 J - Not A/B/C9 i6 [1 ~- i e/ p) v& L
- </div>' z# I4 e0 B0 D; F; J6 b4 u
- </div>
5 i: _3 h) }4 v! D0 B4 b+ a, H -
! k/ d6 }3 o4 f4 I7 J8 x - <script>
, ?+ G0 W' `6 t+ p" Y* _7 Q - new Vue({
+ x- X+ C# Q/ y' _4 t - el: '#app',6 \( q* b( B% H
- data: {
1 w O! a3 X0 k7 Q% U$ z5 G2 c6 l8 ` - type: 'C'$ Y' o! S# Q' u) m
- }/ V0 \/ ]7 N! }% o1 e
- })3 {; F0 }6 ~0 N% o% t- M
- </script>
复制代码
, q+ R0 ^& e/ L- Y% s1 }8 Cv-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。 v-show我们也可以使用 v-show 指令来根据条件展示元素: v-show 指令; ~6 o) ]4 D" d0 {* t2 }% g
- <h1 v-show="ok">Hello!</h1>
复制代码
8 g" o! R3 X% W( G( V+ A+ U0 _( Y) I B8 L8 L1 X( q
: m' Y8 a3 ]# G2 e' W
3 J# A/ E E; x7 c2 [, O1 |; h4 k |