条件判断v-if 条件判断使用 v-if 指令: v-if 指令在元素 和 template 中使用 v-if 指令: - <div id="app">4 M- i& z6 p6 l) N$ H
- <p v-if="seen">现在你看到我了</p>0 q" m. e* }! x
- <template v-if="ok">
( R; W- H# ~; U' w1 L- A8 B3 P6 S - <h1>菜鸟教程</h1>0 X v! Z9 l3 v& n5 d; F
- <p>学的不仅是技术,更是梦想!</p>8 E. K, R& ?7 {2 u
- <p>哈哈哈,打字辛苦啊!!!</p>
* @3 l- Z/ q2 A6 L - </template>2 y$ ]/ H5 X+ G
- </div>8 g3 M; G3 k2 G9 x
-
5 ^: H A9 u& |7 C) \ - <script> ^" Z' g# S% H7 c/ P- n$ y) ]8 y
- new Vue({
, w# t6 h( o' j: i - el: '#app',- v: E$ P X; E" C
- data: {
1 U. |& B1 M1 O0 a9 U: y - seen: true,
- n- G' e# S. m3 P# Q& ^! B" m: j1 T& ? - ok: true+ k5 M) B) ]3 {6 [& L _
- } `5 @; A* @# P& Y
- })
K# V7 N) R; e7 }1 O - </script>
复制代码 & R# e/ n6 I9 a8 C3 l9 v" ]
这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。 在字符串模板中,如 Handlebars ,我们得像这样写一个条件块: - <!-- Handlebars 模板 -->
) {3 e# ~- o5 q$ g* z - {{#if ok}}
! ~( P9 p- V) n+ t, E& @- u - <h1>Yes</h1>! T6 ^/ @+ W. t: l
- {{/if}}
复制代码 v-else可以用 v-else 指令给 v-if 添加一个 "else" 块: v-else 指令随机生成一个数字,判断是否大于0.5,然后输出对应信息:
' H0 q0 y0 y/ B) X% s$ @( x( r- <div id="app"># A! ~ g/ C6 f. g
- <div v-if="Math.random() > 0.5"> }: B+ {6 F% X3 v$ g9 N: V
- Sorry6 U8 f, w* I- a( D* ^" M( ^/ N
- </div>% H0 k8 F8 i1 {: D/ I2 H
- <div v-else>
4 R* d. d, T `0 z9 v - Not sorry
5 L7 y9 J! F0 J4 u( u- S - </div>/ v/ a6 `! d) q7 i7 J0 i
- </div>) @# a/ I8 e# O" d b" H/ |" W7 P# t
-
# z2 `* F9 T% S6 S8 { - <script>
- ]" k6 B+ j3 b N! q - new Vue({
- X, f( `2 T/ N) _, b - el: '#app'; w2 y9 Q l3 w8 f
- }); N' S9 J& A; j h
- </script>
复制代码 v-else-ifv-else-if 在 2.1.0 新增,顾名思义,用作 v-if 的 else-if 块。可以链式的多次使用: v-else 指令判断 type 变量的值: 7 m! r& H7 l. p$ W! \
- <div id="app">
4 U: U) S2 T! |* } - <div v-if="type === 'A'">
9 r7 v1 X/ J/ C/ M* b - A# X0 {) W( M- A9 Y$ c# h( q
- </div>
y0 A L7 ]4 F7 g# j- s. k - <div v-else-if="type === 'B'">
3 m5 Z8 ?0 y2 x! R; [ - B
, L- f3 B, z" e. Z; n8 V/ s% w - </div>
, Q+ d8 @1 P1 }" A - <div v-else-if="type === 'C'">
) S6 i! ?2 ~# y - C
" x- S( _9 w7 ~/ } - </div>2 \' |0 F" U) m! u
- <div v-else>; l# e. W+ f& n2 c" S
- Not A/B/C# K+ N. z7 m0 d6 J5 {! _ I0 P2 w# I8 A
- </div>
+ I7 [ [0 Z. u8 L - </div>
- A( }. `2 C4 D - 5 n% Y4 Z/ p" u- V% y- F- D3 ^2 z
- <script>$ e( h( O4 W; z! Q2 T- |
- new Vue({/ y0 G$ c. L/ T& q/ z
- el: '#app',
) r* W8 R; W' _+ k' H* p - data: {
* s4 \$ @, c+ Z; V! D& V& ^+ L - type: 'C'; m( d0 j' B m/ K4 s
- }
8 u, [; F% z6 J1 ]/ \0 e1 l - })
- c8 A/ i8 _+ c. | - </script>
复制代码
, O0 ]9 G+ C3 A8 a7 Nv-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。 v-show我们也可以使用 v-show 指令来根据条件展示元素: v-show 指令
9 b$ ?" P8 j: |- <h1 v-show="ok">Hello!</h1>
复制代码 $ `) ^1 W8 p* ^# c. L% W( o z
6 C4 {* F% h: `6 m! U z) i! S4 t6 W2 h
# Q; Z- H+ g V" _% K. l& H |