|
条件判断v-if 条件判断使用 v-if 指令: v-if 指令在元素 和 template 中使用 v-if 指令: - <div id="app">
* W/ q- V" c3 c2 b6 E* o2 u6 m - <p v-if="seen">现在你看到我了</p>
% b1 D7 X* [% D( g" ? - <template v-if="ok">
3 L4 \3 _2 ?0 @, t: Z7 C - <h1>菜鸟教程</h1>
; W* z: f) `8 J* @/ `6 Y0 e5 y - <p>学的不仅是技术,更是梦想!</p>
0 g: v# I$ o9 [ - <p>哈哈哈,打字辛苦啊!!!</p># w: j/ @6 C* w S" i' Y- F& s, b
- </template>! ], b( Q* V0 P/ q
- </div>
, v8 D! B. x; F; D5 l6 K -
& j+ `: I% A+ A( b3 t - <script>0 x( j0 D/ o6 U; ~+ Z0 \
- new Vue({/ H+ D$ A* a* y4 [: A
- el: '#app',
! a4 y V( s& c2 C S( c2 _1 `/ _) ` - data: {& }8 r# o! A# j L9 o
- seen: true,0 o s8 M; i) h5 W$ i
- ok: true
( b' {5 l+ m& s& E1 _ - }
, h$ b7 g+ p+ p! p. r8 N6 r2 i# p - })
C* Z0 a( z* f ^/ y - </script>
复制代码
+ Q' T' S6 Z7 ^# b这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。 在字符串模板中,如 Handlebars ,我们得像这样写一个条件块: - <!-- Handlebars 模板 -->* E, f5 ]5 s2 }" b5 ~
- {{#if ok}}( L: e- B& J5 b `( K! c- J, h
- <h1>Yes</h1>
* K5 p5 S* d0 r* s - {{/if}}
复制代码 v-else可以用 v-else 指令给 v-if 添加一个 "else" 块: v-else 指令随机生成一个数字,判断是否大于0.5,然后输出对应信息: " O- ~8 O! c7 h$ y+ c, {
- <div id="app">
: p! } j* p. A. ?& J" } k - <div v-if="Math.random() > 0.5">* O9 r3 o4 }5 y4 @. y9 s; z
- Sorry6 k1 B4 N- E( s8 O+ T1 _
- </div>
& _6 I! _6 r3 b+ D9 Y2 B - <div v-else>5 G( ]9 l2 p6 M% \ s& |
- Not sorry* ^( i. f+ t! e$ K& X
- </div>
; P) G. i1 a9 i - </div>
* i/ l2 c. S1 j1 K1 @$ o -
. ]: P8 \& t1 ]! V. ^7 L - <script>
. a( A% c* D+ H# y2 n - new Vue({5 t; W0 j' o7 a7 G1 V5 n1 o& E+ P( n
- el: '#app'
* Z5 k6 [1 n) x - })
" c5 h$ b5 r# H5 [2 P - </script>
复制代码 v-else-ifv-else-if 在 2.1.0 新增,顾名思义,用作 v-if 的 else-if 块。可以链式的多次使用: v-else 指令判断 type 变量的值: 4 z$ q/ Y& G# g; r
- <div id="app">, u. ^ R7 C/ x6 g0 I
- <div v-if="type === 'A'">
+ i- h! ] M% I7 ? - A5 X8 B0 b ~' N/ ^* g4 R& y& ^4 s
- </div>7 U) U5 \3 x" c' B( t! C. z% B$ M
- <div v-else-if="type === 'B'">$ B0 D: e! W U, p; k. {' |2 k
- B
8 U0 ?, N5 s7 t/ c' J5 A) C - </div>
9 m/ G6 \8 z. I - <div v-else-if="type === 'C'">
4 z+ R" R* }( o% i2 V - C r% _. \, t' d. i& C. _
- </div>2 `! p8 Z/ r5 B0 f( |+ s9 j
- <div v-else>& c* v) \5 C. _. v" e. q
- Not A/B/C \4 w. O/ }- F3 b9 Z- k0 X$ P" d% E
- </div>" y4 x# V5 _5 J! Y0 x& S: f
- </div>( }. B, Z) ]. ^/ o; C0 W
- 5 D) a" ? b5 k2 u6 R8 @
- <script>: L6 o$ j# {0 o3 {
- new Vue({. Z+ J* ^' Q+ b, @$ ^* ?
- el: '#app',
$ \" U& I4 x2 x0 |+ W/ z* l - data: {+ N+ ^7 U% G9 W, d8 c
- type: 'C'% ~: {7 w+ C9 H& N) s7 a3 H7 Y& m; `7 A
- }
, X5 s8 Q: d2 I3 d" D - })- q5 n5 v5 U9 d8 R; J2 `2 L
- </script>
复制代码 4 N8 ^$ Q; t9 A4 I* c) r2 ~
v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。 v-show我们也可以使用 v-show 指令来根据条件展示元素: v-show 指令; \0 j3 r+ b: S5 X# b9 b8 \# X+ {
- <h1 v-show="ok">Hello!</h1>
复制代码 6 C( f0 [5 e* s1 x' H
0 g; x1 e, H* `* \) j% A
7 D9 v0 b! t. r3 }
+ \5 m/ _! E* L) Q" ^5 T
|