条件判断v-if 条件判断使用 v-if 指令: v-if 指令在元素 和 template 中使用 v-if 指令: - <div id="app">4 p- ~) J% |( g4 P7 t
- <p v-if="seen">现在你看到我了</p>
6 J" n3 p- Q, N5 p. K9 P! g' F - <template v-if="ok">
& x9 T$ h. w& B) N- P0 @# n - <h1>菜鸟教程</h1>9 ?; M# D' `( B; _2 B0 O1 E
- <p>学的不仅是技术,更是梦想!</p>2 I4 J7 A2 [2 k& M) a' G6 j7 U
- <p>哈哈哈,打字辛苦啊!!!</p>) M4 B$ j& e! Q" K! z5 y
- </template>" s; a3 ]4 j z J; A
- </div>
- d2 y A% r6 [% ~$ W/ [# S - 0 L8 W. e1 y5 T7 a4 o6 b
- <script>
+ }+ t1 c. P' {' G9 q - new Vue({$ {" g5 t. t5 X5 w z/ [) W! X* L
- el: '#app',; f" j2 }3 W% k6 L
- data: {
! u, E( u9 o2 ^5 }. J - seen: true,
' r2 j$ [$ ?3 J2 q6 z - ok: true
7 N1 D" |2 q, h! k1 A* T - }
: }# M0 n6 ?- e# M6 |9 M - })6 I5 l, k: I" |/ ?2 m
- </script>
复制代码
8 i& W. h7 v9 ?# z5 C这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。 在字符串模板中,如 Handlebars ,我们得像这样写一个条件块: - <!-- Handlebars 模板 --> S/ n$ a j4 K* l; ^
- {{#if ok}}' g; i7 _& G7 D& p7 m! Z
- <h1>Yes</h1>
; ?: J% j) N& T) F1 ^7 F - {{/if}}
复制代码 v-else可以用 v-else 指令给 v-if 添加一个 "else" 块: v-else 指令随机生成一个数字,判断是否大于0.5,然后输出对应信息: 0 e! X g" d$ H# {' [" c/ o$ T
- <div id="app">3 N' I3 d3 f. d# W1 C
- <div v-if="Math.random() > 0.5">
- ]; T3 t- G1 p( z6 n$ v* V - Sorry& J: F( o: \1 V: ^9 m
- </div>
; T6 T8 ]1 T: [' Z - <div v-else>% L% P' n- E/ U& H+ O
- Not sorry
2 F$ D0 L. W8 `& E0 C: q - </div>
- ]8 `" Q, E; z' I- t* H! X - </div>
1 H" C/ }# I( j' Z+ s; H - & V, M+ c+ ]$ `/ z; j& n' c
- <script>
% n+ |4 U9 }6 J' E: ]" O - new Vue({
3 T- s& ^; |: I9 D: S5 u - el: '#app'
) g- d+ S+ h7 b - })' b; G" n6 B( A4 ~
- </script>
复制代码 v-else-ifv-else-if 在 2.1.0 新增,顾名思义,用作 v-if 的 else-if 块。可以链式的多次使用: v-else 指令判断 type 变量的值:
0 \/ C3 i" @6 G$ M5 {1 X- <div id="app"> d Z& ]3 i/ o5 ~, A, f+ g- Q8 T* K( S, R
- <div v-if="type === 'A'">& f8 n) B9 A: k; `# C$ A' E
- A( y. f2 j1 O4 D) n6 e
- </div>
& t% g; E6 }" y5 k1 } - <div v-else-if="type === 'B'">
% O) Z; D/ h5 N' b4 H7 L - B
+ m$ J3 w- ? I8 w; L' o3 p - </div>
y! w# l+ z; l2 l; l8 h4 a+ ^ - <div v-else-if="type === 'C'">( a$ Z* R, u* A+ ]' v' P! ?2 B3 ]4 Z
- C
+ P6 Q q" E. d - </div>2 d/ R) F& D# V0 ?, S
- <div v-else>. n* e3 Y' ?/ P# G" |
- Not A/B/C
# d$ Z3 ]4 ]) q( ?5 h - </div>& F% u6 f" E, k& X% Z
- </div>
! V J7 {2 f" L9 e6 U - # Y( w( l4 f6 v, U, {
- <script>
& S7 p @1 _* Q7 ]: a: v - new Vue({9 a& L: T/ S- f
- el: '#app',/ T/ A @- f2 O' w, V0 n! q
- data: {* Y# W0 D5 u2 V
- type: 'C'
D4 G3 W, V' j' l. J - }
* d! x8 ]! [8 w0 O5 B - })
) R. L( u5 Y, y( g: h - </script>
复制代码 ) i) C. r! w7 P5 C9 w. s: `& ?& U
v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。 v-show我们也可以使用 v-show 指令来根据条件展示元素: v-show 指令7 U1 D( x$ a+ I6 U8 ^
- <h1 v-show="ok">Hello!</h1>
复制代码
4 p- }4 a8 s6 v+ a7 {" g. t9 `4 G: `3 a7 l P
4 {3 I$ T7 H1 k v7 ^" n
9 v% R0 \$ ?0 x2 u1 s4 W9 u |