条件判断v-if 条件判断使用 v-if 指令: v-if 指令在元素 和 template 中使用 v-if 指令: - <div id="app">
6 t% K& s* d/ G3 V8 | - <p v-if="seen">现在你看到我了</p>
: r& _8 |' P' h; Z) P6 h/ M - <template v-if="ok">
2 U5 I, T1 R6 O) W. p8 m+ u2 B; d - <h1>菜鸟教程</h1>
! v' I" E4 _/ N) z - <p>学的不仅是技术,更是梦想!</p>
+ }$ Q H$ }4 M* w: g - <p>哈哈哈,打字辛苦啊!!!</p>
, ]- a5 s( o" X' ` - </template>8 {6 R8 g/ ?$ T5 p9 v* b. {' Q
- </div>$ U* b3 o5 g7 E1 M8 I
- . N' w$ I" J9 C
- <script># }1 `$ Q9 O' c
- new Vue({
7 z0 C" y% J. q% o [( Z - el: '#app',1 @: I4 q+ T; k; T3 y* V. P6 ]$ c
- data: {- r" N/ M" r4 F
- seen: true,* J6 T$ X# V0 D3 R0 V8 w: F
- ok: true9 e( ^9 ?# A8 G9 m) H+ G, C
- }
) v2 C8 |' j$ s9 U - })
" v- I7 v& X' t3 K - </script>
复制代码 _3 v) \. I, E! x( S
这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。 在字符串模板中,如 Handlebars ,我们得像这样写一个条件块: - <!-- Handlebars 模板 -->2 d+ ]# P8 [; p$ P5 R
- {{#if ok}}' g" f3 ?: q6 ?; Y
- <h1>Yes</h1>
( o) v l$ w4 o* N. A K - {{/if}}
复制代码 v-else可以用 v-else 指令给 v-if 添加一个 "else" 块: v-else 指令随机生成一个数字,判断是否大于0.5,然后输出对应信息: ; t+ S/ I& x0 _0 C
- <div id="app">5 j8 ]3 C/ _0 o0 Q& f T! W1 g3 F( |) h( V
- <div v-if="Math.random() > 0.5">
8 g( C& g- U. w! p0 m) U/ e - Sorry% x% p# K6 ^& E( D/ y% E8 B6 d) `9 k
- </div>
" Y1 n1 K0 w+ L& J# ?4 z# I - <div v-else>
7 H% f: {2 y& {) ] - Not sorry
+ a8 \! l6 e0 G3 D$ v6 Z - </div>! N2 u* o) I' J: e, l) O
- </div>
% Y; [+ X. ~; y. s -
7 ^5 x/ S3 d$ R4 f1 i - <script>
7 s9 F7 L$ M. r% H; J4 Q - new Vue({
% Z" {0 R# z& i$ O8 D, u - el: '#app'
/ }- n% h7 {( B8 H - })6 J$ d" }$ ^/ Y* o0 ]5 E- s: ^
- </script>
复制代码 v-else-ifv-else-if 在 2.1.0 新增,顾名思义,用作 v-if 的 else-if 块。可以链式的多次使用: v-else 指令判断 type 变量的值: V. {2 A& J8 G. j0 W. B
- <div id="app">. z, w! X2 u* q0 L+ O" @
- <div v-if="type === 'A'">: ^! N) G- e. v" m# h2 m, m; J) c% ^
- A
! _- ?, K7 T" L( ^6 T3 W - </div>
9 e' i/ `$ ? ]4 L" }( ]2 N; b - <div v-else-if="type === 'B'">1 }/ u% Q7 C2 T
- B( g# P# d9 m* r9 d; T* G# o) e# {
- </div>. k o: b" X' L L
- <div v-else-if="type === 'C'">
" n% r( i2 k" @9 n# r! N2 D - C
4 n0 T- U K* U' J6 F - </div>
- C5 R+ @* n$ } O, | - <div v-else>$ E5 n5 b- h* t& t$ \5 F
- Not A/B/C2 y n* X# T' M7 l
- </div>
5 C$ v* P: {% b7 }& x - </div>$ g( _ P9 }; \- F9 g8 F8 R5 F
- 2 _/ r3 E% Q l0 Y ^$ G7 C
- <script>
% ~3 j, G6 U! l) U2 F5 n; Z - new Vue({) n: z2 N0 D; d9 W l3 S
- el: '#app',
: d) p& D0 p8 R$ L) V - data: {& Q# A+ H$ c' R# }7 {) i
- type: 'C'
8 S( G: K7 h( c2 e; W N - }" J: H$ t$ w' u/ v. H/ x
- })
- u$ s$ j: M& a3 r! i" u4 r( a: A# B - </script>
复制代码
5 R- F% K8 l( {( o, `! Nv-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。 v-show我们也可以使用 v-show 指令来根据条件展示元素: v-show 指令6 {4 n( n: M' ]. N) ^& d2 \: Q# m
- <h1 v-show="ok">Hello!</h1>
复制代码 & F: b, }) D$ o2 E
; @3 ~& E6 o9 A% g& A5 U8 p! O& I# b/ F& H
5 O; H/ H& {# G( k" [4 s |