cncml手绘网

标题: Vue.js 条件与循环 [打印本页]
作者: admin    时间: 2018-7-4 10:52
标题: Vue.js 条件与循环
条件判断v-if
条件判断使用 v-if 指令：
v-if 指令
在元素 和 template 中使用 v-if 指令：
  1. <div id="app">7 m% ]+ G; G9 N- E
  2.     <p v-if="seen">现在你看到我了</p>
    ' U8 f2 A2 _* R4 U7 G
  3.     <template v-if="ok">
    4 Z0 E4 r) e9 e( n+ R& g
  4.       <h1>菜鸟教程</h1>
    3 ^& K$ z; g- }( H" @( g' l
  5.       <p>学的不仅是技术，更是梦想！</p>
    : |/ I/ @0 V% C! r/ g' }
  6.       <p>哈哈哈，打字辛苦啊！！！</p>3 `4 u, P  l. W: m1 z
  7.     </template>
    ' }8 \4 S+ |! L
  8. </div>
    ( y$ D3 X/ o' C: ]7 [+ V& [
  9.    
    " z1 L, E! Y1 ?) f+ w: u
  10. <script>
    $ m& r% d8 E' \" [
  11. new Vue({
    . l. U2 f+ i  |. x' I; S% I
  12.   el: '#app',1 `# d7 n0 r7 R! f4 D  D
  13.   data: {# o$ ^2 C7 q; q, L& i; m/ c- T6 b
  14.     seen: true,1 \6 C. p: [; r6 H9 k+ _' S$ F
  15.     ok: true
    ! L4 a' W8 }, w7 u  t: L, k5 N
  16.   }( o8 i  A8 ^! m9 C" R/ M# S
  17. })% U" a# Z. U7 @
  18. </script>
复制代码
! s. F2 L* l1 ]. |/ F* `/ s+ R
这里， v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
在字符串模板中，如 Handlebars ，我们得像这样写一个条件块：
  1. <!-- Handlebars 模板 -->
    6 n4 a3 [# @  r) D! y3 Z3 P  j5 b
  2. {{#if ok}}/ R% {' T% H( s  T* X
  3.   <h1>Yes</h1>0 _* {( B4 s2 i3 k  j, B
  4. {{/if}}
复制代码
v-else
可以用 v-else 指令给 v-if 添加一个 "else" 块：
v-else 指令
随机生成一个数字，判断是否大于0.5，然后输出对应信息：
/ T  F, u  ]) n1 S9 @
  1. <div id="app">
    & N+ V. h( W; p. I
  2.     <div v-if="Math.random() > 0.5">) K0 a; z+ b! L' }! \
  3.       Sorry- A/ d5 a5 n7 k9 y3 @2 Q9 L$ v' K
  4.     </div>& Q* {5 R) w8 ?( o; A3 q; }, n
  5.     <div v-else>
    / N% w) u1 }! M. k" ]+ Z
  6.       Not sorry- X! X: x; `! B0 C
  7.     </div>
    8 r5 {0 D$ r% n+ G: x, v1 t
  8. </div>; {" _9 c0 l) p* y' _
  9.     / e3 B7 ?5 n$ \1 R# P
  10. <script>9 _. H: P7 r  p
  11. new Vue({% {. g- b: W: n& B- l5 M" |. F/ Z
  12.   el: '#app'
      {! S$ {# k$ G/ n
  13. })
    * \2 N+ j) t( P
  14. </script>
复制代码
v-else-if
v-else-if 在 2.1.0 新增，顾名思义，用作 v-if 的 else-if 块。可以链式的多次使用：
v-else 指令
判断 type 变量的值：
, D0 K) Z; o9 {2 R) [
  1. <div id="app">0 Z; g" M1 @8 W; M/ j- t
  2.     <div v-if="type === 'A'">
    ( x! E) l: B0 ^
  3.       A
    6 ?1 J' n* \7 A* Y/ c5 P
  4.     </div>
    7 ?8 l9 n5 \  V7 Q+ S
  5.     <div v-else-if="type === 'B'">5 ?$ K: S1 d; \! k9 Q* {: b
  6.       B
    6 m0 a3 R( j  U
  7.     </div>' b1 [/ V7 }* G; E" b, Y9 s
  8.     <div v-else-if="type === 'C'">
    " B9 ]2 q+ h  p; i$ }% w
  9.       C
    8 n9 ^. ^4 }0 @  v5 g, T( f
  10.     </div>
    $ R. q% B9 ]6 ?( l" X; f
  11.     <div v-else>( ~& M, ?2 Z7 l7 Y9 `; c
  12.       Not A/B/C
    ' ]6 W( Z) L8 D: v
  13.     </div>
    6 a! G& w1 {7 p0 U7 L5 h
  14. </div># x! U% F0 B0 H- e1 \) c" V0 p: G
  15.     + X& h5 q) T( ^  V: ]* b& {5 E
  16. <script>5 e7 M( K2 I6 J9 A) z* Y
  17. new Vue({
    - w9 ]8 P' d: S
  18.   el: '#app',
    . p& _( J6 v. ?5 J
  19.   data: {, ~8 ^8 R6 p( I8 [$ |- f: j
  20.     type: 'C'2 K: w  K4 S+ w( v0 w5 Y. I5 i
  21.   }1 @% [3 M$ Q3 }# ^9 w. {
  22. })
    ! M* K0 R0 P- }5 ?( F
  23. </script>
复制代码

5 {& Z1 z) L7 v( c
v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。
v-show
我们也可以使用 v-show 指令来根据条件展示元素：
v-show 指令
9 J! u0 f% G4 D& z/ i
  1. <h1 v-show="ok">Hello!</h1>
复制代码

! W% N8 _2 z! F+ F) ^: @
: s/ i! d2 S6 I: ^$ L
' P% E/ x6 v  k
  l! c& v. `3 R; t$ f



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