|
条件判断v-if 条件判断使用 v-if 指令: v-if 指令在元素 和 template 中使用 v-if 指令: - <div id="app">
! e9 X9 O" j1 |8 R1 g& F - <p v-if="seen">现在你看到我了</p>
4 _ x( |7 ?6 Z7 ~' K: ? - <template v-if="ok">6 k7 i* q2 A3 H- o/ U7 j; }) m- z
- <h1>菜鸟教程</h1>
9 K& k1 `! |0 S+ V& s& F$ O - <p>学的不仅是技术,更是梦想!</p>
( ?3 n/ ]) h& b, a, g - <p>哈哈哈,打字辛苦啊!!!</p>, B; o' v- R! @1 v
- </template>
' ?$ F& T3 Z+ X- E; @+ E - </div>
8 }4 ~0 i! H# J* U5 V& j; R" _ -
+ y/ X) P& v. C3 V - <script>
1 O% f% k$ Y' s - new Vue({2 f. j# y. U# v
- el: '#app',2 w% D$ m# f+ T1 D) Z2 f$ t
- data: {7 ^" N% G' S. ]4 q% s
- seen: true,/ a. e! l: P. h' q) z7 [% C N7 X
- ok: true
5 ~, z# i, W$ m/ | - }
) \4 n$ v, q+ i0 l3 H& b. j9 p - })6 q: g; K" }0 {4 D [" m
- </script>
复制代码
7 g( a' h. z: [7 G这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。 在字符串模板中,如 Handlebars ,我们得像这样写一个条件块: - <!-- Handlebars 模板 -->6 S) x( u7 `4 T1 f% d" d3 ^
- {{#if ok}}
4 f( O0 S0 H' C4 W; s - <h1>Yes</h1>
$ l7 v: p# v7 h2 a0 ]' g% @ - {{/if}}
复制代码 v-else可以用 v-else 指令给 v-if 添加一个 "else" 块: v-else 指令随机生成一个数字,判断是否大于0.5,然后输出对应信息: + ~9 `! y! k& Q. K/ ?; u! G( ~" K
- <div id="app">6 Z: X" e$ |; G$ u, n0 Z& o
- <div v-if="Math.random() > 0.5">
% x) q- u$ K% ~% } y - Sorry( U" P& h, r2 K* r9 V
- </div>$ l2 a- W; x5 a m* L
- <div v-else>; p/ _$ M' B0 W5 B. ?
- Not sorry) C) ]# y: A; r1 @4 i
- </div>
! b, y6 @) B. f' V( k - </div>
% k) T) r% O) L4 N. x+ J - $ N, V4 u9 {" A* D) T* G6 P
- <script>
5 G: z4 n3 {' u, x. F - new Vue({$ j s! u1 B7 q
- el: '#app'0 R- L5 r8 z) F8 |* H$ |% Q1 C& p
- })4 i; M7 B" a& N. Z; v
- </script>
复制代码 v-else-ifv-else-if 在 2.1.0 新增,顾名思义,用作 v-if 的 else-if 块。可以链式的多次使用: v-else 指令判断 type 变量的值: ; u4 @* S/ F- Q$ x
- <div id="app">1 P7 ]) k! R* D" |$ m- x: h
- <div v-if="type === 'A'">7 _- e2 S6 ?. n
- A
# j) \: g, Y# {; ^6 x% i - </div>1 s" R v& e6 T5 u5 ^ M! m% L
- <div v-else-if="type === 'B'">
" l$ d8 s) [' k' v - B3 a5 v# o' J0 i0 O. P' \* p2 L
- </div>/ A4 z( ?& d1 h6 k Z( S5 l
- <div v-else-if="type === 'C'">5 j) _9 Q9 ^ E& X* o
- C
) }; w+ ~1 f1 E+ z, U - </div>5 K% Y* j" T( Q* R0 E5 W
- <div v-else>: K0 q/ @( e& J, j% Q9 H
- Not A/B/C: P* r5 i" v0 K! G# e# g
- </div># O/ c2 L" G0 k! l5 A! c; X% v$ E
- </div>
9 V# a! h" `+ C - , \! `0 Z5 o* L0 h0 J
- <script>0 n7 Y! |" L2 p, Z( Q, R
- new Vue({
4 x6 A6 v6 H6 O' w2 V6 _3 q# q - el: '#app',
W8 Y2 Z0 ^9 v - data: {8 i. k- s% d" Y3 F+ i! i8 }9 Q1 r# e
- type: 'C'
l7 U0 `% [6 H3 y, M; c8 ]: U - }
6 f. D) t* J+ |" Z7 q% D9 m; I - })
) G: L" k3 _+ S1 ]3 `) f/ F - </script>
复制代码
9 f U3 G/ N2 f/ O* qv-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。 v-show我们也可以使用 v-show 指令来根据条件展示元素: v-show 指令
' P+ U5 J) d4 ~' r- <h1 v-show="ok">Hello!</h1>
复制代码
0 b& D1 ?) X V( [$ d8 [0 N
' K- ?; g8 r4 C- }1 I) J
_% {) L! M f2 d
& g9 N" V" D( Y( I4 e% ] |