cncml手绘网
标题: Vue.js 条件与循环 [打印本页]
作者: admin 时间: 2018-7-4 10:52
标题: Vue.js 条件与循环
条件判断v-if条件判断使用 v-if 指令:
v-if 指令在元素 和 template 中使用 v-if 指令:
- <div id="app">
& f$ A' N6 u7 Q' c8 T# q - <p v-if="seen">现在你看到我了</p>- x- m& V5 `5 u* V- F4 A; @& m
- <template v-if="ok">$ e0 C5 j9 }# p3 m5 A
- <h1>菜鸟教程</h1>
- A2 B) W; a" ~) F5 Q - <p>学的不仅是技术,更是梦想!</p>: W4 B5 O( C5 J6 M: x/ E/ p
- <p>哈哈哈,打字辛苦啊!!!</p>+ M- ?6 ]( h# g( }) ?. w
- </template>
' T4 E& \2 U. J4 w/ {: b - </div>
/ W3 K/ }# {& _# R1 W" y. z - - D4 ~, N: l( [2 Z8 B9 M* M; G
- <script>
( \& |( w: @! j* f" Z# o/ `; _ - new Vue({% m, I0 ^ a8 O! Y8 h
- el: '#app',
5 H' v) i$ X5 I - data: {
Z: ]7 ^2 e3 [( H8 a - seen: true,
/ K6 I4 J' {6 X1 Z - ok: true
8 |" F& Z6 V+ C& { B6 B - }) j" j8 q5 ?/ @0 [) p: }
- })
% T0 p# w- K+ {& Z0 q - </script>
复制代码
2 a6 `. R+ l8 \- ]6 `; Z这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
在字符串模板中,如 Handlebars ,我们得像这样写一个条件块:
- <!-- Handlebars 模板 -->* _. g, `. P F; b5 n5 X0 ~; o
- {{#if ok}}
# Z$ W" ~- x; f% M! l) e# {+ Q( s7 X8 A5 n - <h1>Yes</h1>2 I: a% e8 \+ L% @$ f: }. A, y
- {{/if}}
复制代码 v-else可以用 v-else 指令给 v-if 添加一个 "else" 块:
v-else 指令随机生成一个数字,判断是否大于0.5,然后输出对应信息:
7 P" G+ {0 o$ }! \, N8 d
- <div id="app">
( J5 t6 e% K& u) k2 z, |. e - <div v-if="Math.random() > 0.5">( E7 w" s T% x- B0 V
- Sorry
# C5 S# ?2 M1 x1 q6 f6 G - </div>
" X& j/ j1 o3 H+ s7 I - <div v-else>1 `( `$ K2 [0 C2 z6 e5 M5 v
- Not sorry, T0 N9 Q" d$ y
- </div>
9 {. P V- D' k4 d - </div>& \* f; W3 [9 L2 X3 u: d/ I
-
6 {0 F: g3 N6 q) C/ _2 V - <script>
6 I3 t1 I: R4 l& M) q+ i* `0 {) E - new Vue({
: e$ u% P+ L# m" R0 ]* E, j - el: '#app'
. ?4 U1 p8 K# V - }); U; e% V/ B' e* c" ~8 z5 ]
- </script>
复制代码 v-else-ifv-else-if 在 2.1.0 新增,顾名思义,用作 v-if 的 else-if 块。可以链式的多次使用:
v-else 指令判断 type 变量的值:
- T' W; H/ ~3 s8 h
- <div id="app">9 N# ?" ^- {6 K7 Q. l9 T
- <div v-if="type === 'A'">
0 p3 c& r/ g9 `$ x- E6 _ - A
6 O8 M5 P9 C+ m - </div>
6 B% ]0 K/ p" R6 f1 |8 f - <div v-else-if="type === 'B'">
, l8 V/ l/ e" L4 z( t - B
2 y( s+ U7 P, H - </div>
/ X0 o! ?1 W- `; A. ^ - <div v-else-if="type === 'C'">" Y" [8 }" ^$ H; n& Y; O
- C
; o7 ~ v: a0 u; Q& {1 N* F - </div>) `0 m0 E# [" C+ F
- <div v-else>
( ]. D5 ~/ F) x6 E- F# {6 a! a - Not A/B/C( ?" c7 E; K% g9 I9 B' I1 y
- </div>
( @. G' J/ o8 t - </div>
7 L8 o$ p+ y+ \9 `3 h* p -
" }' X* J! K' k9 _! l. Y" L - <script>+ t4 f @0 O5 m2 {# E1 X
- new Vue({
( w3 B1 q: A: |7 t0 K& u - el: '#app',
$ w: n. }, A3 B - data: {+ D# e4 G, m8 o
- type: 'C'
$ D2 @+ \% G1 u+ M - }
' W [; g" i' O3 @% H' R' N - })
& P3 L0 O7 e3 A* @% _& s3 \ - </script>
复制代码
7 q* P" H/ y; x( u2 `7 n- dv-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。
v-show我们也可以使用 v-show 指令来根据条件展示元素:
v-show 指令" i, {% { V0 I" |; C" ^
- <h1 v-show="ok">Hello!</h1>
复制代码
9 Q; E" E ~! J* v: O: R" N; j9 q9 m" r
5 b" e4 O$ {. `, j% ]/ v# N
( U4 H- i, J! j$ J
| 欢迎光临 cncml手绘网 (http://bbs.cncml.com/) |
Powered by Discuz! X3.2 |