|
条件判断v-if 条件判断使用 v-if 指令: v-if 指令在元素 和 template 中使用 v-if 指令: - <div id="app">2 @! l* ~# D* _
- <p v-if="seen">现在你看到我了</p>
4 N5 c0 w5 T! T- a - <template v-if="ok">
' K2 c7 M N6 s( I+ k( a - <h1>菜鸟教程</h1>
5 \9 t# W: N9 s9 ]/ ? - <p>学的不仅是技术,更是梦想!</p>
/ b! R2 Z2 Y1 i) S$ ^) e" A7 k - <p>哈哈哈,打字辛苦啊!!!</p>
6 ^2 B# |1 u6 Q. s - </template>
: ^- f# n1 P1 J# Y6 A0 i - </div>
# P- Y* ~0 `! o* K M' F p -
6 d4 h# l3 D2 E1 m1 e - <script>" v( |9 W- h- ^3 F0 ^
- new Vue({4 g! Y# a6 O2 @+ }/ R% ], e
- el: '#app',
' t/ z3 r' G4 J0 A8 v: u' I - data: {. v& r* c9 A8 d& m
- seen: true,
7 L6 a6 i% w0 v3 l9 p - ok: true% m0 V( u& K: e: w* Z |
- }& f3 i, [: u: X; B, F$ t T# C+ @
- })
7 n4 H1 R) s2 _9 r0 u, o - </script>
复制代码
3 L1 q* u" V4 y1 I# r$ K这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。 在字符串模板中,如 Handlebars ,我们得像这样写一个条件块: - <!-- Handlebars 模板 -->% x9 j' [( w5 F$ O4 w
- {{#if ok}}
5 G* y5 O5 z# ?4 |/ Y( H, g8 s - <h1>Yes</h1>; i8 L" {" [* p5 b% o$ d& @- G
- {{/if}}
复制代码 v-else可以用 v-else 指令给 v-if 添加一个 "else" 块: v-else 指令随机生成一个数字,判断是否大于0.5,然后输出对应信息:
9 }7 m5 T7 m6 Y0 F1 }- <div id="app">% @9 M& W7 y$ `; c- T5 W4 D: E
- <div v-if="Math.random() > 0.5">: Q; U: \. h$ v, _6 A% C
- Sorry
! Z! b5 v! z) m5 `% Y6 z# n - </div>1 q9 ^# I7 U$ S( |' i+ ^! L/ L
- <div v-else>
# L* C! |+ g" d C( x# ?8 k$ ]' p+ g - Not sorry; \ X% f, h0 }
- </div>
- h' v3 K0 z$ R4 g" V. ?6 d, y - </div>
: R" U4 W6 ?1 u$ o' V& [ W% m2 H -
4 o' x: n4 c0 { - <script>
7 X4 y% {% x' @3 V! h7 p - new Vue({
+ b8 V, T! |6 P6 {" v0 ? - el: '#app'
+ V; c% A5 z' [# r7 r# ^ - })
5 ^& ^6 W! ~3 C* ] - </script>
复制代码 v-else-ifv-else-if 在 2.1.0 新增,顾名思义,用作 v-if 的 else-if 块。可以链式的多次使用: v-else 指令判断 type 变量的值:
; a' w8 H9 j. N" G- <div id="app">
2 z; Q; i2 V3 M" ~/ E - <div v-if="type === 'A'">5 s- a/ U5 r1 v& y- F. H5 i& ^9 j
- A7 K9 e1 R$ U# E: { w8 {% F
- </div>
; C m4 l, V3 A# A: I4 Z/ L7 F3 T - <div v-else-if="type === 'B'">
9 a3 r) b* L, K7 ?7 B - B3 y: O( u- n' E, F- }) Y
- </div>
: r$ D, l- N$ ?7 p; h s' c - <div v-else-if="type === 'C'">
' ]& c9 f% n1 X3 {/ f - C( m8 B1 Y: b7 a: H6 v
- </div>5 e5 {3 C w2 ?
- <div v-else>
- q ]6 ~1 y6 M0 B" d3 E9 p4 m - Not A/B/C
7 ~2 q4 x- ?0 \5 X/ `( L" e* D - </div>: l1 m& M8 f6 a- `
- </div>. ^7 A4 Z* D, j& B' l' _4 k% R' J
-
# x9 c" Y: t. Q1 z: H0 m - <script>8 S6 q8 p& K. a+ ~6 u! e# M
- new Vue({: @) W3 w2 e9 Q
- el: '#app',
& M- F* C; e; ]4 H4 S - data: {* Q4 j* H* M; a" k s8 X( S0 ]
- type: 'C'6 S8 G& Y0 b% t: O
- }
% e5 b/ D9 r- c7 J% d) g3 K: f - })
( f0 P5 A* E4 @/ U5 N9 y - </script>
复制代码 . p! J5 u) x k' E
v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。 v-show我们也可以使用 v-show 指令来根据条件展示元素: v-show 指令6 o+ @2 _ B h ]% {
- <h1 v-show="ok">Hello!</h1>
复制代码 3 e" h8 H* I9 x5 _! G c
1 `, t# Z( p" f$ C2 Z1 n& Q4 U
2 w: g& s8 g& q) Q! h0 [3 L; b7 T
% a. c4 Z4 C6 [7 ]; d. b |