cncml手绘网
标题: Vue.js 条件与循环 [打印本页]
作者: admin 时间: 2018-7-4 10:52
标题: Vue.js 条件与循环
条件判断v-if条件判断使用 v-if 指令:
v-if 指令在元素 和 template 中使用 v-if 指令:
- <div id="app">9 x3 \) @/ \; v% R& L+ P
- <p v-if="seen">现在你看到我了</p>
* ^ B+ K! k- \6 w% F - <template v-if="ok">
6 Q5 h8 f8 H# c8 i8 X0 e9 X - <h1>菜鸟教程</h1>: o" @ H: ]) f9 B4 _( a% [% g
- <p>学的不仅是技术,更是梦想!</p>& K4 P; W6 q4 [; N: S& [
- <p>哈哈哈,打字辛苦啊!!!</p>
: b/ _* L! T8 P; S - </template>8 R m$ \) s! _; ]. G
- </div>
8 P* u8 q8 [+ G - 3 p( q z! I% A9 L" v
- <script>
" ~/ a4 _ E7 K Z# |9 ~ - new Vue({
+ I) e0 B; G8 d - el: '#app',& w/ U% r- |3 _
- data: {
1 r4 ~/ x1 L# Q0 v* ^ - seen: true,
1 t' w; b/ l. o4 u) Q/ C% o - ok: true
0 ?4 T% m( B0 p% o. F% E1 R - }5 g. {$ Y- b1 U4 J
- })
" k8 U" z+ K+ n, k - </script>
复制代码
* W7 ]' O3 d$ s c' ~1 r8 \这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
在字符串模板中,如 Handlebars ,我们得像这样写一个条件块:
- <!-- Handlebars 模板 -->
* v8 l n2 _; l& w - {{#if ok}}' U, \" i0 s# U2 r
- <h1>Yes</h1>
- U7 ?9 r7 y& L" M( [! c - {{/if}}
复制代码 v-else可以用 v-else 指令给 v-if 添加一个 "else" 块:
v-else 指令随机生成一个数字,判断是否大于0.5,然后输出对应信息:
2 b1 K8 Z6 n0 J" Z# Z/ R
- <div id="app">! G0 } v* [ ]6 I9 I
- <div v-if="Math.random() > 0.5">
" P2 ^: n0 I! C$ {+ ` - Sorry5 B' d2 R. } Q9 R2 T
- </div>
* b, h6 r; d- F, ?- N0 G - <div v-else>8 L, e* G/ a' r
- Not sorry5 V% Y( s! f1 k4 h" S" h" X q
- </div>& T2 ~- m% K9 O
- </div>
. t8 A. v, r: J/ x1 B0 Z, d" ~ -
5 s+ x- b' J& K3 U @ - <script>$ Z1 u5 q( ^: c6 D& K
- new Vue({& @" X0 }9 |3 H& R7 N; T# ?
- el: '#app'
8 H5 o5 R; M# O3 j0 x$ k - })
$ U: ~2 F% E( ]# ~: F - </script>
复制代码 v-else-ifv-else-if 在 2.1.0 新增,顾名思义,用作 v-if 的 else-if 块。可以链式的多次使用:
v-else 指令判断 type 变量的值:
) e7 F( F9 I- G: C2 _8 V4 C$ z. c8 s
- <div id="app">1 z" p. r4 I& W/ E
- <div v-if="type === 'A'">2 H5 L' K9 V* t* A9 x0 e
- A) n: _/ G+ p( o: V% h6 @( y$ m' p
- </div>
3 g/ e: g: D9 r6 M) |9 l6 y - <div v-else-if="type === 'B'"># d j% x& Q) m* u0 S" k7 e
- B
/ h7 L9 l) `# e& `" S2 u - </div>( ^0 _! g( v' T9 [8 R7 Z; `
- <div v-else-if="type === 'C'">! m2 e ?+ r3 t3 P6 R
- C
6 _! o4 ~5 S' f+ T+ h - </div>1 A7 |1 {- [2 Q0 g
- <div v-else>* C/ R( O, G& D
- Not A/B/C
8 S9 y( N6 a% k, o/ z! o# Q - </div>% U' `+ i: |6 t0 F: D" f3 o" w4 ]
- </div>7 H1 ~" n$ m* D* b' s z2 M/ D0 Z& ]
- * N( F1 p/ _- h' v8 B9 L& J4 m
- <script>+ R! ?' [: ?8 `. k
- new Vue({7 }7 n+ C! i# a
- el: '#app',
! {" L( e: q' J8 P8 B1 a - data: {
8 ?3 g) `& k) X$ o8 P - type: 'C'
$ X3 B6 k( H. _3 ^8 ^ - }
. I1 m, r; j, \" Z; x4 Y - })
2 B z9 r, ?5 n! g4 M - </script>
复制代码 ) i* v6 ?1 b [
v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。
v-show我们也可以使用 v-show 指令来根据条件展示元素:
v-show 指令7 M* }1 h/ N: p
- <h1 v-show="ok">Hello!</h1>
复制代码
$ W1 X4 N4 j$ R9 `' g
4 @1 Z6 e2 m" B( J A9 Q9 m- H; @! B
6 b) V9 J! O% p$ E. B/ v! m6 a/ L
| 欢迎光临 cncml手绘网 (http://bbs.cncml.com/) |
Powered by Discuz! X3.2 |