cncml手绘网

标题: Vue.js 条件与循环 [打印本页]
作者: admin    时间: 2018-7-4 10:52
标题: Vue.js 条件与循环
条件判断v-if
条件判断使用 v-if 指令：
v-if 指令
在元素 和 template 中使用 v-if 指令：
  1. <div id="app">
      z/ P7 Y9 P8 n. M. N) @4 l
  2.     <p v-if="seen">现在你看到我了</p>
    & O  [' l' j& M- H! y: S
  3.     <template v-if="ok">
    ) U- y" N/ L  |$ D! T
  4.       <h1>菜鸟教程</h1>" S% Z, ]0 r% ~( `6 U
  5.       <p>学的不仅是技术，更是梦想！</p>
    8 E& M2 c2 ~' O- V# H1 g$ G
  6.       <p>哈哈哈，打字辛苦啊！！！</p>2 t# m/ |/ ?; j
  7.     </template>3 t  X/ a6 d( A0 z% [0 k+ R
  8. </div>; R- w1 d! g& k
  9.    
    8 Q' b% J- W5 R  H( a) L
  10. <script>
    # a: Q# [6 {! l7 d: s
  11. new Vue({
    % A. @9 o" Q( v
  12.   el: '#app',
    * b! H1 e5 u+ k  F# _  m# k* n/ b
  13.   data: {
    & N9 D3 R9 ?* U; h8 Q* h
  14.     seen: true,7 v% b8 a3 ?; E7 B% m% M
  15.     ok: true
    # P& Q/ }9 \( h2 O/ i
  16.   }( b9 ]; W8 H7 D9 l3 S7 [# g
  17. })% J) L' d4 v# F/ A/ d
  18. </script>
复制代码

& n3 ]$ B, z6 t
这里， v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
在字符串模板中，如 Handlebars ，我们得像这样写一个条件块：
  1. <!-- Handlebars 模板 -->
    ) k- e! V2 F5 d9 o- ^
  2. {{#if ok}}
    % b) n9 Q* B* U, q# C* Z# V! @' Z! u
  3.   <h1>Yes</h1>& \2 O) p" j& H
  4. {{/if}}
复制代码
v-else
可以用 v-else 指令给 v-if 添加一个 "else" 块：
v-else 指令
随机生成一个数字，判断是否大于0.5，然后输出对应信息：

5 P+ T: F' M; Z) I
  1. <div id="app">
    3 [. K; Z  M( B% \' |) |# t* S
  2.     <div v-if="Math.random() > 0.5">8 Y/ P* j; ^, A9 V! `3 B) O
  3.       Sorry
    + F+ q1 d6 |2 [4 q; T$ K
  4.     </div>
    7 W& p, n' h& j( L1 v+ C% E# I
  5.     <div v-else>$ b# o: _) p; \
  6.       Not sorry
    & d  b  t0 y: ^
  7.     </div>
    : N' G, ~8 L& A7 u( B$ {  c
  8. </div>
    8 E) [5 w# V$ n/ O( q7 B
  9.     8 E1 g  @3 }2 u6 `' B/ Q; X3 y$ x! ]
  10. <script># `( ^8 d3 _  R* C1 d
  11. new Vue({
    ) X+ ?# q$ I& p
  12.   el: '#app'
    1 s& D/ e* G0 m; t6 r
  13. })
    / z- J: A4 J  _
  14. </script>
复制代码
v-else-if
v-else-if 在 2.1.0 新增，顾名思义，用作 v-if 的 else-if 块。可以链式的多次使用：
v-else 指令
判断 type 变量的值：

! A$ F* _, [. f1 v0 Y
  1. <div id="app">1 b: C9 s3 o2 z* P* A8 g- T
  2.     <div v-if="type === 'A'">
    ; E7 Y0 T, {' S( S& x& t& e& p1 a' ]8 c  ^
  3.       A2 u4 _8 r/ z. r
  4.     </div>% [" s# ^1 j2 c
  5.     <div v-else-if="type === 'B'">
    : V' @& [1 e' j- r2 X7 e' s* s* c
  6.       B; [( A/ k1 W% p2 a+ R& q; f
  7.     </div>
    9 D7 n. I8 `6 M8 `2 s1 X) u
  8.     <div v-else-if="type === 'C'">
    ) B! P+ b" {) L$ s; |& z2 ?
  9.       C
    , O: J/ m* A) o, ~  w
  10.     </div>
    $ l5 _  ?) t" ^
  11.     <div v-else>
    / F- K) M' Q, v- N" v0 n8 J" R
  12.       Not A/B/C
    0 h  N3 f, i5 q& k7 a$ r3 t; |, s
  13.     </div>) |8 f4 r% @+ C/ S! X8 ]
  14. </div>5 H7 o! d  B3 j* C4 m4 Q4 @
  15.     & U5 Q5 k( v) s! z
  16. <script>3 D5 P; f. b9 ^
  17. new Vue({
    & a6 O) J# J. I% s
  18.   el: '#app',
    ! G! K& w3 b: s  w
  19.   data: {6 c- B' _( |$ `, l  `
  20.     type: 'C'
    9 c, Y* G$ h- O) t
  21.   }
    : u& [' Y/ J/ v' q
  22. })
    0 ^5 m* s0 J/ a1 |5 q
  23. </script>
复制代码

, b, X/ [2 o- }+ {  [1 t8 F6 y
v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。
v-show
我们也可以使用 v-show 指令来根据条件展示元素：
v-show 指令
) y( a$ P, p# Q; W; U3 K+ G
  1. <h1 v-show="ok">Hello!</h1>
复制代码
$ s  D, K; r% q
" T# |4 }9 G# U. {% h+ ~1 m
* U% K, z' s# L/ c; l" e' I
) A) s- C$ j- T; C) V1 A, W




欢迎光临 cncml手绘网 (http://bbs.cncml.com/) Powered by Discuz! X3.2