条件判断v-if 条件判断使用 v-if 指令: v-if 指令在元素 和 template 中使用 v-if 指令: - <div id="app">6 w) Z+ N9 s, a4 _
- <p v-if="seen">现在你看到我了</p>+ m5 i; q" |( R) K8 J: ^
- <template v-if="ok">0 v0 _4 i# |5 I) r# T+ Y0 C0 Y5 K5 H
- <h1>菜鸟教程</h1>
- g, l( ~+ y8 F' x# k3 N! }: p1 R - <p>学的不仅是技术,更是梦想!</p>
! {) T4 J% E R' @2 Q2 C8 h4 A - <p>哈哈哈,打字辛苦啊!!!</p>
' w% n1 m" }4 Y& \: C7 ]5 \2 ~ - </template>8 e- x3 {) V' d" s- x( l
- </div>: r9 ~4 @1 A9 p# V
-
) [; u& b' H4 j" m- i; ]6 w' M7 {0 w7 y - <script>5 e- d+ j# N3 v2 s2 R, ^
- new Vue({
`. L; q2 Y2 s- ?0 q - el: '#app',: C! }0 r2 y: U$ T& R* K6 A$ F. O
- data: {
; ^6 Z: v, @8 ^) P6 b0 y! l/ e \ - seen: true,
" }0 e* j( X* y6 r6 G/ u3 N: D - ok: true
- ?* {( _# L& \' x/ G; _5 c - }
& l% S5 K' Q! Q7 O6 e/ u - })
0 ~$ z) e1 D0 o) p - </script>
复制代码
2 }6 G6 o h% c @- J这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。 在字符串模板中,如 Handlebars ,我们得像这样写一个条件块: - <!-- Handlebars 模板 -->' }4 s+ V$ B: `/ m
- {{#if ok}}
* m2 I. D4 h9 f5 G Y) q - <h1>Yes</h1>
# \: H4 o: z- } _ r3 ] - {{/if}}
复制代码 v-else可以用 v-else 指令给 v-if 添加一个 "else" 块: v-else 指令随机生成一个数字,判断是否大于0.5,然后输出对应信息: ) s8 [% b! v- e% m' ~9 P+ |; e
- <div id="app">& S/ W( i% {9 s9 ~
- <div v-if="Math.random() > 0.5">; j" l2 Z: m3 Y( Q) D i, Y
- Sorry
8 ~# Y/ F: Z2 [, h ^ - </div> x [0 t$ H7 w+ ~# V0 T
- <div v-else>
& W* H, ^& w9 [+ V# c1 H - Not sorry
* `# J! Z3 x. j* \ \* \; C" u! d - </div>
, s" V7 u1 Y" ` - </div>6 z3 j6 `5 A+ a1 o# M; m/ C
- 3 W+ a# R3 i5 q; F
- <script>2 a. Y4 m" v6 O4 D1 d8 n$ X4 K
- new Vue({( a& w7 A; s$ q2 Z
- el: '#app' K5 a% T' C8 `0 v& ]* j( T, t
- })9 W, |& [$ d- N$ N
- </script>
复制代码 v-else-ifv-else-if 在 2.1.0 新增,顾名思义,用作 v-if 的 else-if 块。可以链式的多次使用: v-else 指令判断 type 变量的值:
% X; b$ s$ Z) a( w5 D$ s- <div id="app">9 U, E, z1 V9 h: C
- <div v-if="type === 'A'">
3 t v+ b7 P$ u. A4 c9 | - A
4 m: m: R* J: O& V" h* ] - </div>
% i* }* s3 Q8 A: u - <div v-else-if="type === 'B'">
( e0 \% `* J- N7 I% y5 W+ O - B4 r' c; x7 y$ [! T( N9 s
- </div>& T% o Y& Y0 y1 f+ I" S
- <div v-else-if="type === 'C'">
4 @9 t4 ~% y2 y, E* U - C
3 c* w4 R( O y4 [- Y - </div>
7 _) z. H) }) y$ W3 P" J) ?$ j5 J - <div v-else>
7 o+ H6 B* [8 o - Not A/B/C
5 h. l$ E/ \& C! L& { - </div>% _; d- M) h) E* j. Y# C" B' w
- </div>
+ t: u" p0 l3 ]( ^* z - + [8 \9 d$ j" I( d) l
- <script>
' X- S) _) S. Z/ l/ i% I I - new Vue({* [/ ?$ Y8 p5 Q) Y! g- ^& J
- el: '#app',
6 ]8 O7 ]" y( o5 M - data: {. n* \/ |0 b3 x
- type: 'C'
! @& {$ [# H; Y9 h0 t" | - }
0 L9 N. l( ]: Y1 Q! q - })9 A) n) H) H! c/ o: F+ y4 r X
- </script>
复制代码 . Z& D" ~3 n5 D9 L) N, x* B
v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。 v-show我们也可以使用 v-show 指令来根据条件展示元素: v-show 指令
* o" B, }7 K( \- d+ P1 }# e- <h1 v-show="ok">Hello!</h1>
复制代码 3 ?1 Z6 l6 _5 n8 G+ I* N
6 \, V# o2 J6 r8 r2 ~
- P" J: L' [/ v+ X2 u0 s; j
: n2 _# c5 k, |0 L [4 D |