cncml手绘网
标题: Vue.js 条件与循环 [打印本页]
作者: admin 时间: 2018-7-4 10:52
标题: Vue.js 条件与循环
条件判断v-if条件判断使用 v-if 指令:
v-if 指令在元素 和 template 中使用 v-if 指令:
- <div id="app">
1 T1 `5 I' }3 A& ` - <p v-if="seen">现在你看到我了</p>& Z5 a9 O4 u, m! y8 Q
- <template v-if="ok">& ^2 w' z3 E0 {
- <h1>菜鸟教程</h1>
/ f5 @6 o3 x9 ?: `4 ?9 T& A - <p>学的不仅是技术,更是梦想!</p>
" p+ I' P# v. f% o( A7 l6 ^ - <p>哈哈哈,打字辛苦啊!!!</p>
( K/ S& \, }# ^2 N2 z' I - </template>
8 l# r5 ]5 q2 T, h* ]. ] - </div>
# n" {& i8 q8 T8 f; z& j5 O0 R5 L - * }* X3 D+ m6 @+ \, a3 _
- <script># [% z, b7 D+ u4 B1 e# ?
- new Vue({1 b* E7 _+ |0 a) Z* Y
- el: '#app',/ h" L8 t$ v) L' W9 U% S
- data: {
8 o: v' |! h- X1 X. V - seen: true,: E* h: {6 l+ o5 T/ ?7 O" N
- ok: true
9 e4 |5 u' Q m% Y - }
. E% V2 K$ W9 \) O% b9 E - })
( n. v8 q; H1 h, z - </script>
复制代码 8 {% T: k _/ \ s7 j
这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
在字符串模板中,如 Handlebars ,我们得像这样写一个条件块:
- <!-- Handlebars 模板 -->
: T; M( `6 m0 y5 I" Q4 j# w7 x - {{#if ok}}
2 l* z, |, u' }& j: _ - <h1>Yes</h1>( n! X; r% a2 P) Y* |
- {{/if}}
复制代码 v-else可以用 v-else 指令给 v-if 添加一个 "else" 块:
v-else 指令随机生成一个数字,判断是否大于0.5,然后输出对应信息:
7 V" n# A& ?: e$ t$ h' r- Y
- <div id="app">, _9 T4 v" l7 N# z5 M
- <div v-if="Math.random() > 0.5">
{0 ^1 B2 Q, d4 o - Sorry
$ ]! D/ ` Z! [; r1 \ - </div>
3 U; q+ h% B3 k - <div v-else>( t" g4 v; n x ?) s
- Not sorry: g/ P; F6 z% q4 n+ Z7 T5 D
- </div>
$ X$ V# F: }+ G& v2 b" W) d) E - </div> [% i/ F% B, H4 T
-
& {" }* L$ r4 |& ^, G - <script>0 r9 j4 Z9 v0 B# m; P
- new Vue({& F8 ?4 `0 G. J. q
- el: '#app'7 f2 f3 i- c* X! @( I
- }); W. H3 i9 E' r- r' Y; j
- </script>
复制代码 v-else-ifv-else-if 在 2.1.0 新增,顾名思义,用作 v-if 的 else-if 块。可以链式的多次使用:
v-else 指令判断 type 变量的值:
! i1 V7 P) ]1 Z& J! ?% H( ~- <div id="app">+ {5 |: g6 H4 t9 h! s) K9 U5 C
- <div v-if="type === 'A'">
1 G9 O. C; ~/ T, l' g - A8 b8 B/ P8 S2 j+ p, ]
- </div>
4 q: E. M% K( l' o6 D* o0 g - <div v-else-if="type === 'B'">0 u0 I- I; r3 q1 D) u4 i7 F: j5 n
- B
' c+ [% p$ b! P' ]8 n) e: r/ { - </div>
* b& o# l! Z8 _6 j+ N- h, _& e - <div v-else-if="type === 'C'">$ N2 ^# t, K$ Q( D
- C
( g5 e' m. M" N - </div>
" H) o+ E( B4 L, B9 G - <div v-else>; l& D& j' ?* n U) @* a
- Not A/B/C
+ c2 r# H) l1 f1 I6 E& y6 }0 Q0 x5 l - </div>4 x6 J: J* v( ~2 }$ p0 {2 c
- </div>
9 Z1 B) W5 D, C" G* D -
9 L% A9 [4 C+ w4 A7 w; c) @ - <script>3 T6 e1 J9 h K$ V3 t% j& a* @/ B
- new Vue({0 W/ m& _. a. Q1 a4 @7 ^' ]9 ~% F
- el: '#app',
- u+ I% W. p* U+ h - data: {
7 K$ ~9 W3 [. B3 p- O: ^ - type: 'C'1 b7 i! s4 v9 W" {) I* u
- }
7 Y d) y) O& k5 C - })
! l: K8 w0 H1 Z - </script>
复制代码 $ @# \! C; y0 x( N
v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。
v-show我们也可以使用 v-show 指令来根据条件展示元素:
v-show 指令" U6 ]; B e- Q) ~/ ^ m; Z# y
- <h1 v-show="ok">Hello!</h1>
复制代码 7 Q$ Z1 k+ o0 V' a
+ m. u- o9 w" |" c4 X
8 s* k3 l, Q5 b7 B. b' a7 T& x9 o/ |* ?6 N9 P- O
欢迎光临 cncml手绘网 (http://bbs.cncml.com/) |
Powered by Discuz! X3.2 |