|
条件判断v-if 条件判断使用 v-if 指令: v-if 指令在元素 和 template 中使用 v-if 指令: - <div id="app">
5 x: T! Q2 a. V4 s- H - <p v-if="seen">现在你看到我了</p>6 @6 B9 F! V7 p) ]$ M% l _
- <template v-if="ok">
9 A: x" ?6 R S' k; k - <h1>菜鸟教程</h1>& }- P- \- s/ K# C, Y2 C$ I
- <p>学的不仅是技术,更是梦想!</p>
3 x- _ x1 H3 F - <p>哈哈哈,打字辛苦啊!!!</p>1 T6 A! @$ q9 _( |3 N
- </template>8 c3 e" A$ }( G. u, m
- </div>. R. [& s; n: @! y1 D! s- f
- 6 o9 A/ I5 J. `8 }6 O
- <script># R9 M5 H3 [7 o) f/ y* @" ~
- new Vue({
5 ^+ f3 s ]; c1 |: t - el: '#app',
2 J: F; s/ A- {& a: r- p - data: {7 }$ m1 ^6 {8 y) h
- seen: true,5 [. I. S. o( s; I* B) {# ~3 I
- ok: true6 ~# n6 l- D6 X% p
- }; m, p1 Z# e9 @2 ]0 u- \, r6 Y
- })
7 E$ ?& g- F2 G5 b; @. ~ - </script>
复制代码 ( |: P- T; w/ V2 u) R
这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。 在字符串模板中,如 Handlebars ,我们得像这样写一个条件块: - <!-- Handlebars 模板 -->' ?7 } q+ ?6 e+ o/ G, g/ Y- g
- {{#if ok}}
" n+ I2 i) R! u/ I1 v5 Z7 w9 N - <h1>Yes</h1>
. m1 J) I2 o! r4 d1 _7 r - {{/if}}
复制代码 v-else可以用 v-else 指令给 v-if 添加一个 "else" 块: v-else 指令随机生成一个数字,判断是否大于0.5,然后输出对应信息: 2 W' K) ~8 m! U6 U4 w/ B
- <div id="app">
, L- m8 ~9 v; R% i" K - <div v-if="Math.random() > 0.5">" n i' |# i! m# W- t1 r" n0 }
- Sorry, p, ~; @9 T0 |, \, H! {
- </div>
' I: Z9 ^, Q) M7 G - <div v-else>
- M$ L4 t, ^! c; d- e4 l - Not sorry! C1 }* y5 p L8 m+ ?
- </div>
% r1 q* N+ f! }& L# _* T& t# t - </div>8 Y6 s6 e' \! m% v7 t
- / f/ `: r/ y3 K9 z9 L' E) p
- <script>% @, V0 V4 ?& w2 W5 `
- new Vue({
. [' ^( m1 l: u& D& c - el: '#app'* ~5 Y& T2 L+ ?6 B0 x/ ^4 `
- })
+ v* I/ c0 m3 z9 F: W8 r - </script>
复制代码 v-else-ifv-else-if 在 2.1.0 新增,顾名思义,用作 v-if 的 else-if 块。可以链式的多次使用: v-else 指令判断 type 变量的值:
/ n5 e* p% |/ O) q/ z4 C1 b* q- G# x- u- <div id="app">6 R e+ T! }/ \$ p9 Y6 H
- <div v-if="type === 'A'">/ b8 g8 t& y, z
- A
3 m5 K( `% ~2 r/ s4 _1 C. L# G - </div>
+ B7 T& |9 j# N. R - <div v-else-if="type === 'B'">
5 J: L: {' i% E/ j4 l) L - B
7 q: L' ?# F0 B - </div>
+ \# d8 m3 k/ `2 n! f! J0 T - <div v-else-if="type === 'C'">
! u' G% P- X& X5 U5 Z7 F - C
2 M9 ?3 O7 J2 J+ A+ m) D+ L: V - </div>1 [! ?1 x" d/ L% I( f$ ^, v1 ]
- <div v-else>* ~5 }# V+ S& P' v/ R2 K
- Not A/B/C
( f+ i- c2 [1 a8 f- s P3 H - </div>
! t7 c. L7 R3 ~% }( U+ u0 `' U - </div>4 O$ t, n/ M/ \
-
9 W) t- L0 m/ \2 V6 L0 J( w! h - <script>
9 n/ _, f- Z- G; G2 j - new Vue({, [3 L2 C# F3 h ]) J9 ?
- el: '#app',
8 @, n: S/ F2 o" F - data: {" F( w+ W5 H& V( i0 m# x
- type: 'C'
" l- [! c5 K. w6 [ - }
! q- W5 Z) @7 n# W6 w ^ - })4 y2 @2 m' h5 s+ n+ D4 ?
- </script>
复制代码 M* ~' N0 ?9 q* d8 F. q
v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。 v-show我们也可以使用 v-show 指令来根据条件展示元素: v-show 指令
5 W, w! a: e9 I+ h0 l$ L7 M! X- <h1 v-show="ok">Hello!</h1>
复制代码
" O3 T+ b4 W0 H! B1 U7 x
# a6 f/ g. W% L$ O3 D/ [
2 D4 V# v. k. q, c: f5 }9 M+ a3 F) S" U& M
|