条件判断v-if 条件判断使用 v-if 指令: v-if 指令在元素 和 template 中使用 v-if 指令: - <div id="app">
$ v/ Q N( ]# R+ ~9 c - <p v-if="seen">现在你看到我了</p>/ @5 T3 A; {$ S0 x! A
- <template v-if="ok">' g: T8 a! `* p
- <h1>菜鸟教程</h1>
2 `% \& ]' O' M0 g - <p>学的不仅是技术,更是梦想!</p>
6 f- u! F! n8 S+ M - <p>哈哈哈,打字辛苦啊!!!</p>
) t. r+ {$ x( I2 e - </template>( h; N# m3 Q" f) o; @0 k. m" |
- </div>
# f2 I# v8 |8 T' K& G -
8 N- b" D* a6 e& j3 f9 ?9 B - <script>
3 X# o& U- p2 m0 d6 {2 C6 _+ w - new Vue({
* d3 w& D7 e" ?* X! Q0 M2 ~3 U - el: '#app',
: V1 e' }# J' ? - data: {
" i2 q1 A0 ~* Z/ |( N8 w! z - seen: true,' y# ?; j& _6 N) m5 d0 [3 J
- ok: true; |- }9 V( D8 E& U' v' P; ]! g$ x
- }
) d3 m6 |$ _+ w4 X4 _4 S - })5 o& H% A0 Q0 v6 f1 i6 J. Y
- </script>
复制代码 # z8 D6 q6 `; a5 ?9 @) F% K8 E
这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。 在字符串模板中,如 Handlebars ,我们得像这样写一个条件块: - <!-- Handlebars 模板 -->+ C( ^7 J6 K" R3 G
- {{#if ok}}
3 s2 y8 h0 j$ _6 S3 N6 k - <h1>Yes</h1>
; {1 H. y; S _ - {{/if}}
复制代码 v-else可以用 v-else 指令给 v-if 添加一个 "else" 块: v-else 指令随机生成一个数字,判断是否大于0.5,然后输出对应信息: * G& O% _- ]- W- E5 P
- <div id="app">. Z1 @! \2 E' m& m/ I3 [, A6 `* c
- <div v-if="Math.random() > 0.5">+ C/ f- r1 K- Z [0 O0 v
- Sorry. m- k; H4 U5 K) W
- </div>" `6 u. k/ n: l4 U; q
- <div v-else>4 ]! M7 F: N7 O
- Not sorry
4 B- D6 V4 c/ S# h% A, L - </div>
) S4 Y5 F& L: z* P1 o4 W& p( i - </div>- M0 d8 P; u0 o/ i8 t9 P& L
- ) ^2 A% r2 Z! T
- <script>
6 D+ x o% K7 ]; f0 |% Q - new Vue({
8 H% o* b/ v# W6 g h \1 t - el: '#app'5 i! X1 l& v/ C$ [
- })3 u0 `, z" P& u# D/ f# V1 Y4 P
- </script>
复制代码 v-else-ifv-else-if 在 2.1.0 新增,顾名思义,用作 v-if 的 else-if 块。可以链式的多次使用: v-else 指令判断 type 变量的值: 2 f( N7 H# t6 l, N
- <div id="app">
& O' t5 T3 \; k' ~8 k, b+ u - <div v-if="type === 'A'">% G9 g# K! p' d' j
- A
6 d. W* t. U0 h# D! I# h+ D - </div>7 U' Y/ A9 j" a2 B& R& f
- <div v-else-if="type === 'B'">, V, ~/ ]5 Z: C2 L' ]
- B
" x3 p! g2 V: P" M5 b - </div>3 F* a$ V+ C7 v: `. h4 E) e
- <div v-else-if="type === 'C'">
, g' u: u3 @$ A% Z - C
# H$ k3 {$ G# S6 j. m; n7 E' r - </div>
7 `# R" V& L0 I1 k# D - <div v-else>) h6 j& A: k# K9 E# A/ B* p( n
- Not A/B/C7 e" `. Q; t, r; _% @
- </div>7 |0 T6 { k+ h, c! D) A
- </div>
: Q1 g K. l: E - 5 A: ^2 `# i! Z9 |0 A
- <script>+ ^3 A% R$ G( E
- new Vue({
6 [. P5 O, y. H( d( v1 F& J4 N - el: '#app',' V- }+ b# ^3 U; d& z
- data: {
' d! t8 s( j5 m7 r+ ~ - type: 'C': a& X% Q3 ~0 \5 k" ]
- }
5 L. ~: \& A, ]; h - })
! e$ ]' g- l; K- q- g! ?1 \ f - </script>
复制代码 4 ]8 A+ M+ g" m, q- Y9 y
v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。 v-show我们也可以使用 v-show 指令来根据条件展示元素: v-show 指令
/ N5 r6 p9 |! e9 Z- <h1 v-show="ok">Hello!</h1>
复制代码
0 u" `- a1 F2 n4 B& P9 |3 v: E0 K) V+ v* P
7 F. t) v- W' v: p2 k+ \4 {, w+ k3 m" Y$ w R' | W7 [+ p
|