cncml手绘网

标题: Vue.js 条件与循环 [打印本页]
作者: admin    时间: 2018-7-4 10:52
标题: Vue.js 条件与循环
条件判断v-if
条件判断使用 v-if 指令：
v-if 指令
在元素 和 template 中使用 v-if 指令：
  1. <div id="app">
    & f$ A' N6 u7 Q' c8 T# q
  2.     <p v-if="seen">现在你看到我了</p>- x- m& V5 `5 u* V- F4 A; @& m
  3.     <template v-if="ok">$ e0 C5 j9 }# p3 m5 A
  4.       <h1>菜鸟教程</h1>
    - A2 B) W; a" ~) F5 Q
  5.       <p>学的不仅是技术，更是梦想！</p>: W4 B5 O( C5 J6 M: x/ E/ p
  6.       <p>哈哈哈，打字辛苦啊！！！</p>+ M- ?6 ]( h# g( }) ?. w
  7.     </template>
    ' T4 E& \2 U. J4 w/ {: b
  8. </div>
    / W3 K/ }# {& _# R1 W" y. z
  9.     - D4 ~, N: l( [2 Z8 B9 M* M; G
  10. <script>
    ( \& |( w: @! j* f" Z# o/ `; _
  11. new Vue({% m, I0 ^  a8 O! Y8 h
  12.   el: '#app',
    5 H' v) i$ X5 I
  13.   data: {
      Z: ]7 ^2 e3 [( H8 a
  14.     seen: true,
    / K6 I4 J' {6 X1 Z
  15.     ok: true
    8 |" F& Z6 V+ C& {  B6 B
  16.   }) j" j8 q5 ?/ @0 [) p: }
  17. })
    % T0 p# w- K+ {& Z0 q
  18. </script>
复制代码

2 a6 `. R+ l8 \- ]6 `; Z
这里， v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
在字符串模板中，如 Handlebars ，我们得像这样写一个条件块：
  1. <!-- Handlebars 模板 -->* _. g, `. P  F; b5 n5 X0 ~; o
  2. {{#if ok}}
    # Z$ W" ~- x; f% M! l) e# {+ Q( s7 X8 A5 n
  3.   <h1>Yes</h1>2 I: a% e8 \+ L% @$ f: }. A, y
  4. {{/if}}
复制代码
v-else
可以用 v-else 指令给 v-if 添加一个 "else" 块：
v-else 指令
随机生成一个数字，判断是否大于0.5，然后输出对应信息：
7 P" G+ {0 o$ }! \, N8 d
  1. <div id="app">
    ( J5 t6 e% K& u) k2 z, |. e
  2.     <div v-if="Math.random() > 0.5">( E7 w" s  T% x- B0 V
  3.       Sorry
    # C5 S# ?2 M1 x1 q6 f6 G
  4.     </div>
    " X& j/ j1 o3 H+ s7 I
  5.     <div v-else>1 `( `$ K2 [0 C2 z6 e5 M5 v
  6.       Not sorry, T0 N9 Q" d$ y
  7.     </div>
    9 {. P  V- D' k4 d
  8. </div>& \* f; W3 [9 L2 X3 u: d/ I
  9.    
    6 {0 F: g3 N6 q) C/ _2 V
  10. <script>
    6 I3 t1 I: R4 l& M) q+ i* `0 {) E
  11. new Vue({
    : e$ u% P+ L# m" R0 ]* E, j
  12.   el: '#app'
    . ?4 U1 p8 K# V
  13. }); U; e% V/ B' e* c" ~8 z5 ]
  14. </script>
复制代码
v-else-if
v-else-if 在 2.1.0 新增，顾名思义，用作 v-if 的 else-if 块。可以链式的多次使用：
v-else 指令
判断 type 变量的值：
- T' W; H/ ~3 s8 h
  1. <div id="app">9 N# ?" ^- {6 K7 Q. l9 T
  2.     <div v-if="type === 'A'">
    0 p3 c& r/ g9 `$ x- E6 _
  3.       A
    6 O8 M5 P9 C+ m
  4.     </div>
    6 B% ]0 K/ p" R6 f1 |8 f
  5.     <div v-else-if="type === 'B'">
    , l8 V/ l/ e" L4 z( t
  6.       B
    2 y( s+ U7 P, H
  7.     </div>
    / X0 o! ?1 W- `; A. ^
  8.     <div v-else-if="type === 'C'">" Y" [8 }" ^$ H; n& Y; O
  9.       C
    ; o7 ~  v: a0 u; Q& {1 N* F
  10.     </div>) `0 m0 E# [" C+ F
  11.     <div v-else>
    ( ]. D5 ~/ F) x6 E- F# {6 a! a
  12.       Not A/B/C( ?" c7 E; K% g9 I9 B' I1 y
  13.     </div>
    ( @. G' J/ o8 t
  14. </div>
    7 L8 o$ p+ y+ \9 `3 h* p
  15.    
    " }' X* J! K' k9 _! l. Y" L
  16. <script>+ t4 f  @0 O5 m2 {# E1 X
  17. new Vue({
    ( w3 B1 q: A: |7 t0 K& u
  18.   el: '#app',
    $ w: n. }, A3 B
  19.   data: {+ D# e4 G, m8 o
  20.     type: 'C'
    $ D2 @+ \% G1 u+ M
  21.   }
    ' W  [; g" i' O3 @% H' R' N
  22. })
    & P3 L0 O7 e3 A* @% _& s3 \
  23. </script>
复制代码

7 q* P" H/ y; x( u2 `7 n- d
v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。
v-show
我们也可以使用 v-show 指令来根据条件展示元素：
v-show 指令" i, {% {  V0 I" |; C" ^
  1. <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