|
条件判断v-if 条件判断使用 v-if 指令: v-if 指令在元素 和 template 中使用 v-if 指令: - <div id="app">
5 h: S( \& z, O! \ - <p v-if="seen">现在你看到我了</p>
( D# R! J* v$ E2 v; m - <template v-if="ok">) W( b' e/ N* K3 @ M2 z
- <h1>菜鸟教程</h1>
& d* A7 V/ l9 q) S+ F2 z - <p>学的不仅是技术,更是梦想!</p>& Y- E' U# E& Y. C+ d4 y' R
- <p>哈哈哈,打字辛苦啊!!!</p> f7 g# [- a g: U
- </template>, ?; u' z5 _) a/ D5 u |0 i
- </div>
2 J) o; d- |/ c3 f$ v - ) ] O, r6 \0 l9 e2 }& p
- <script>9 J3 S2 j3 u/ Y4 l. M0 m
- new Vue({
( t! ~4 w9 E* r - el: '#app',9 [# F3 M# m% T0 o* Q( [
- data: {
, G) x# v/ g! k3 k - seen: true,
$ d) b" J; H# N/ c/ C - ok: true% T7 h. C) q( p$ H, u2 [3 `
- }
4 x! q- s% h v& ]: F4 ` - }): j4 s0 M; ^3 Q, i6 I W# m
- </script>
复制代码
! r+ I9 r% p) M这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。 在字符串模板中,如 Handlebars ,我们得像这样写一个条件块: - <!-- Handlebars 模板 -->
; t! ?! `7 u- Y5 P5 _( T" X - {{#if ok}}8 m! V+ R9 ` C0 T- `
- <h1>Yes</h1>* w; q* v) D4 N8 ?1 E
- {{/if}}
复制代码 v-else可以用 v-else 指令给 v-if 添加一个 "else" 块: v-else 指令随机生成一个数字,判断是否大于0.5,然后输出对应信息:
9 m, a# C% X. u& w% T+ {- <div id="app">8 K& |6 E' G* Z, J
- <div v-if="Math.random() > 0.5">
& P. j2 C; a' `, |* { - Sorry, V, Q- |3 |- b' o1 i3 v
- </div>
* b% |, Z* N! @6 W5 Y( f - <div v-else>
+ R) y3 @2 T8 u2 q5 v% y& E* H - Not sorry8 j+ {) J' y5 a5 @3 v5 d
- </div>" `7 j4 M- i# _) V: ]
- </div>/ I1 `0 }6 R4 S5 M1 K1 V5 J; \' f
-
, w. R/ W; k4 S) W - <script>" U6 x' W3 K7 q) K
- new Vue({
. O9 r! |1 G. p$ P0 C; M" A - el: '#app'
1 _% u8 ~# v+ G7 C5 m- H6 A - })
; N! ?1 O/ c! f$ L - </script>
复制代码 v-else-ifv-else-if 在 2.1.0 新增,顾名思义,用作 v-if 的 else-if 块。可以链式的多次使用: v-else 指令判断 type 变量的值:
5 P, n2 n- R! T7 f$ o, V- <div id="app">
( m2 a9 m4 K/ d5 K0 { - <div v-if="type === 'A'">) o7 `. F) B% L) E: ~- L5 f
- A
3 a( @) r+ g, S1 S$ e" D - </div># [2 j1 @; h9 m, d9 V9 k O1 J: V
- <div v-else-if="type === 'B'">/ [* f* s; g- _7 e- q/ {
- B
. }1 [% S6 X* S" k& F }1 E - </div>
6 z6 M- Z- a' L2 |. m - <div v-else-if="type === 'C'">9 ~! [* y( w! T* @
- C0 t' Q9 v* ]) _# U+ p
- </div>- \0 u8 [( O5 b1 f3 R7 s
- <div v-else>
' I+ b4 B( v5 S - Not A/B/C6 Z8 z& @) |. h5 h/ ^
- </div>! T) w5 o; p! K+ S# M2 j2 c
- </div>
- O! d% O' w- r4 M) g. |1 q7 F -
2 v+ C0 {( P8 K" o Y$ u - <script>& M n: O' A- s, I# x2 ?" A
- new Vue({
" e, m3 ]6 U* t - el: '#app', B4 k; v/ S" O/ i- {4 z
- data: {: N) B! O& r/ s. S7 n" K
- type: 'C', p% o0 _3 G9 Y% o5 d
- }! o5 h# j+ q+ i" k
- })
0 y6 \: Z% M2 n+ l& Q: b - </script>
复制代码
0 N9 @" F& C2 ^9 ]# F, r0 ?v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。 v-show我们也可以使用 v-show 指令来根据条件展示元素: v-show 指令* K" \. @; a' G$ {
- <h1 v-show="ok">Hello!</h1>
复制代码 ( K% q6 q8 X6 K' a) [6 m
; p3 w( n) O1 s+ W8 B) }) V5 O1 N- @- K+ w! N* C
3 ~. Q2 Q0 x# f; C |