条件判断v-if 条件判断使用 v-if 指令: v-if 指令在元素 和 template 中使用 v-if 指令: - <div id="app">
$ c* |5 P$ {, I) ]/ ^& [. p - <p v-if="seen">现在你看到我了</p>
# H8 O8 N4 v' ^4 D/ w; W# m - <template v-if="ok">2 H/ r2 C3 u$ Q9 I7 `; G: i
- <h1>菜鸟教程</h1>: e9 g8 e- ]- F6 l
- <p>学的不仅是技术,更是梦想!</p>
8 A- X! Q) _3 |. Z) l" I - <p>哈哈哈,打字辛苦啊!!!</p>1 Z' d; g( |$ h6 v
- </template>. I6 k* ?0 Z4 g& ^9 \& X, C8 L
- </div>6 T5 V& U0 |, u
- ( F& @6 |5 H/ q9 ]: a4 j
- <script>
. P- M6 F, {4 S( W - new Vue({
) C2 l1 m9 x6 _ - el: '#app',
8 p4 a( h0 z5 E- y+ {4 C U - data: {0 X* U4 F0 ]- P4 J
- seen: true,
" w, ~, H) @ e& z - ok: true
% m( v6 X& i" P+ i# \2 ?! Q2 F; o - }, {9 }9 L# U& X' g- [3 i: Z# h
- }), D. D. y% F4 Z. y
- </script>
复制代码 ' `/ I/ S6 P$ b
这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。 在字符串模板中,如 Handlebars ,我们得像这样写一个条件块: - <!-- Handlebars 模板 -->
+ @) `* v. d' g1 t - {{#if ok}}" W. p) ?# f; Q! a
- <h1>Yes</h1>
+ N6 P7 I( `/ c3 ? - {{/if}}
复制代码 v-else可以用 v-else 指令给 v-if 添加一个 "else" 块: v-else 指令随机生成一个数字,判断是否大于0.5,然后输出对应信息: ' m+ P8 g& `* s7 j6 K. `/ Y( L
- <div id="app">1 C( @! j# x; ~7 s$ D% Y9 H
- <div v-if="Math.random() > 0.5">( W) A* j. v. ^) N+ Y! V& Y
- Sorry3 Y; |" M! S$ h# E
- </div>
2 U# ] T0 r! B' E - <div v-else>
' Z6 o" K4 G Y0 e' _ - Not sorry% H9 L3 F2 B* l3 v
- </div>
& Z/ Q1 Q D$ g1 z0 R/ t - </div>! b* |+ l* T n; p3 ]9 I, A
- . `) p8 H$ O$ O
- <script>4 T1 J& I) h# T4 s# ^
- new Vue({
- {5 b+ X: b6 A% S - el: '#app'
) m* I. f1 y9 A4 x G; b - })
l0 O$ a6 s8 n2 K. C$ T - </script>
复制代码 v-else-ifv-else-if 在 2.1.0 新增,顾名思义,用作 v-if 的 else-if 块。可以链式的多次使用: v-else 指令判断 type 变量的值: / k) T/ [7 ]- O1 _1 H
- <div id="app">1 Y2 Y9 P* {! K2 M$ n( I- L7 Z
- <div v-if="type === 'A'">: K x' \! z! ?- `0 A; A
- A' [6 T( x# ]# \& J0 m
- </div>0 k0 f, W) O7 ]! q- ~( @! ^
- <div v-else-if="type === 'B'">8 G" S( J# Q( i
- B- j. n8 O4 ?; @6 ]
- </div>
+ D/ l- u3 V1 R4 Q* Y5 A' V$ k - <div v-else-if="type === 'C'">8 r6 S6 ?& d/ B. L3 q1 o, O% e
- C
& U) }1 r5 W ?( ^ - </div>: S& ?4 D. _- w5 u4 V/ Z
- <div v-else>1 W8 d9 G, r) q/ G
- Not A/B/C+ w$ q3 a/ W/ e3 B, s5 R0 a
- </div>' e4 c. i7 U. u) h! U) Y1 w
- </div>( l' E% [2 u$ G# X3 }1 K. @
- ) }( m7 m0 Q% j( } f$ {, I, M" c" B
- <script>
+ G6 Q" q F9 R. A8 O h - new Vue({# r3 z. v2 J+ v. E4 Y6 ]
- el: '#app',
* k9 h! j4 P2 X& j - data: {( z% K$ y2 V7 j/ A1 D
- type: 'C'; H7 F" w( e' Q' |% T7 @5 X, ~: R
- }
: y3 |! u" l0 K6 Y - })
' v" g& k0 Z( m# `( E - </script>
复制代码
& P; z5 d; Z, R8 b0 rv-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。 v-show我们也可以使用 v-show 指令来根据条件展示元素: v-show 指令
O' G+ j6 ?2 Z3 e) _' T- <h1 v-show="ok">Hello!</h1>
复制代码 ! |8 y8 Q0 A P8 B3 Z' Z
6 ?5 z( T/ k4 ~7 C) r
( K( M1 u& }5 R2 A5 x' `
* z" B @0 K3 D# W! ?
|