条件判断v-if 条件判断使用 v-if 指令: v-if 指令在元素 和 template 中使用 v-if 指令: - <div id="app">; F# f9 d9 N# b' i4 f2 n/ G
- <p v-if="seen">现在你看到我了</p>% t. {8 ^ V: }% T# K" z% o
- <template v-if="ok">
. n- A0 E: C' n: s |! @! Q6 B - <h1>菜鸟教程</h1>! @# d+ _5 a$ U! |
- <p>学的不仅是技术,更是梦想!</p># x4 q0 T9 k* b* G. [# J- N
- <p>哈哈哈,打字辛苦啊!!!</p>
% k. e" }+ n* A - </template>$ H. r+ D( {( l
- </div>
2 H1 a9 j$ c* R4 D9 t7 A, M( n - 5 ]4 T! w4 F6 F% i! W3 F
- <script>/ o1 J8 n2 i/ Q4 X
- new Vue({
2 s0 k* |( b, ]$ ?/ N - el: '#app',
1 q4 J5 D% j+ c, J - data: {
) h9 i2 s* C' _6 t4 Q' n! u - seen: true,
/ B3 L+ b5 S2 t% I2 c$ u - ok: true/ `5 c& } f" `( l* o8 S8 G0 r0 ?
- }7 M7 J* B: E8 Z# z+ R ?
- })2 T% C, ~& ?& J% C. ~9 @1 M0 [+ q
- </script>
复制代码 + r1 \) Y7 Q" e& J& t9 L2 d3 B9 ]
这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。 在字符串模板中,如 Handlebars ,我们得像这样写一个条件块: - <!-- Handlebars 模板 -->" D: L% G- \. @0 h! y
- {{#if ok}}
" k: T8 p- ?2 j. f; k1 [- ` - <h1>Yes</h1>
, X t& v5 e; V t" K' G/ @ - {{/if}}
复制代码 v-else可以用 v-else 指令给 v-if 添加一个 "else" 块: v-else 指令随机生成一个数字,判断是否大于0.5,然后输出对应信息:
8 H2 ~' h: L6 E9 X6 X8 k$ X- <div id="app"> v m& Y1 I9 Q
- <div v-if="Math.random() > 0.5">2 I: T* Q3 X" w
- Sorry g* @) X- _( z" A! B
- </div>! m: N. |- I. {& k# V/ b0 D' x) V9 d
- <div v-else>$ o* ?; ]' Y" C5 `( f
- Not sorry
& i: P; f1 k9 i4 D# t3 Z - </div>
4 I/ W9 z0 [, ?0 h# V" w - </div>- u4 U/ z3 X, l& S/ U; A/ z5 [
-
2 x* z5 z$ T% y) h - <script>
) {& j1 l' Z* C6 }; N - new Vue({* M2 c6 A; x. H2 s. M
- el: '#app'
. s. _0 [( N) H O1 ^ a - })$ }7 ]* Z: l7 g, ?3 l9 L' i! a
- </script>
复制代码 v-else-ifv-else-if 在 2.1.0 新增,顾名思义,用作 v-if 的 else-if 块。可以链式的多次使用: v-else 指令判断 type 变量的值:
- ~% {3 b0 h) Y: z, `. N( `- <div id="app">
. {5 C3 k- ?/ [4 ~) j - <div v-if="type === 'A'">' q R2 W; W% I0 d# S
- A8 V* D" g( }: a! f' J0 ^
- </div>3 R- g6 {- e' O
- <div v-else-if="type === 'B'">
" w w1 ~# {( N/ S - B) j% a, F9 ]3 R( t' F7 c
- </div>
0 i( L9 `3 W) y8 J! M" L- P - <div v-else-if="type === 'C'">' ^. Y) U2 j, A3 e- c
- C
: v; l- V" B$ Z" H2 T, w! L - </div>, w2 S, V4 [! N& p% p- K# ~
- <div v-else>
5 U( i0 y5 ^) w - Not A/B/C
! }; j9 d* x! V9 ?+ w# U* n - </div>6 r1 J( X* M2 O, Z. }% Z4 i5 r
- </div>! E0 H/ z# H: U/ ~# I& S# E. ]4 J
-
, V9 H9 ~4 Q4 M' g - <script>
. x1 n* w, C! w1 T( q - new Vue({
$ A: l, {# I& h S; J - el: '#app',
0 n; N4 x9 ]2 C: |7 p - data: {/ p5 G8 q \5 {1 e* i+ D
- type: 'C'
; N, [/ H: W. X' J, J+ S% d7 b - }
4 Z/ Q5 ~) T1 y- y - }). r. `) G- q: X) e% d; r
- </script>
复制代码
0 W: z5 q9 N) Q4 V! |( @v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。 v-show我们也可以使用 v-show 指令来根据条件展示元素: v-show 指令2 W1 d+ ^6 j4 b) j. m' E1 z, w% i( P
- <h1 v-show="ok">Hello!</h1>
复制代码
0 `$ a- K) _( ~" K
( @: t% ^) ?6 h* H V1 `) u5 c5 L% R1 p* p
& [4 |" S9 C2 d3 O) _/ K
|