Vue.js 条件与循环

admin

条件判断v-if

条件判断使用 v-if 指令：

v-if 指令

在元素 和 template 中使用 v-if 指令：

1. <div id="app">
   
2.     <p v-if="seen">现在你看到我了</p>
   0 |' M. g. g, v. O
3.     <template v-if="ok">
   4 I+ V6 z, h6 o9 i1 ]. P
4.       <h1>菜鸟教程</h1>
   
5.       <p>学的不仅是技术，更是梦想！</p>
   
6.       <p>哈哈哈，打字辛苦啊！！！</p>
   
7.     </template>
     ]: p( I* l& W6 o: d0 D
8. </div>
   1 {! C$ A2 _6 b- J# e2 B7 B
9.    
   5 ~6 h# g- r, K' y9 B
10. <script>
    & a( `( {% O* Y8 r
11. new Vue({
    0 R; w( Y* {! r/ E. K, c- d  E0 Q
12.   el: '#app',
    
13.   data: {
    6 I& r' D" y6 c3 g- ]* q2 l
14.     seen: true,
    2 j3 Q3 @6 }# H6 B
15.     ok: true
    " r* E; o6 N* {/ ]8 I6 N6 B( L# k, p, h
16.   }
    8 `7 n1 H* ]! n  u4 h! o8 L
17. })
    ) E* ^9 q" o6 w5 G4 E7 Y& C  U
18. </script>

复制代码

  K! {8 g4 Y. }( G; N! X

这里， v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。

在字符串模板中，如 Handlebars ，我们得像这样写一个条件块：

1. <!-- Handlebars 模板 -->
   
2. {{#if ok}}
   5 i2 P. H0 z7 d$ Q2 i
3.   <h1>Yes</h1>
   
4. {{/if}}

复制代码

v-else

可以用 v-else 指令给 v-if 添加一个 "else" 块：

v-else 指令

随机生成一个数字，判断是否大于0.5，然后输出对应信息：

3 P( ?% S  z7 }; ~$ R9 l

1. <div id="app">
   * C6 P8 P: a1 u1 x5 M! c
2.     <div v-if="Math.random() > 0.5">
   
3.       Sorry
   ) L+ @$ e1 ^5 [* P5 G' |4 _2 I, L
4.     </div>
   
5.     <div v-else>
   ! J% w9 [' p4 @% p$ V
6.       Not sorry
   3 \  G5 [+ Q7 A. @
7.     </div>
   $ r! k- N$ I1 I- q4 w3 _
8. </div>
   
9.    
   ; P+ {2 x  {7 d- E8 q( D- d
10. <script>
    # g) b2 l8 Y, M
11. new Vue({
    
12.   el: '#app'
    
13. })
    ; S2 \+ L" K6 J
14. </script>

复制代码

v-else-if

v-else-if 在 2.1.0 新增，顾名思义，用作 v-if 的 else-if 块。可以链式的多次使用：

v-else 指令

判断 type 变量的值：

1. <div id="app">
   / L' G) Q0 R2 Q$ [9 L! B6 e
2.     <div v-if="type === 'A'">
   " W6 V& ]6 G) ^, C1 p+ \5 A
3.       A
   ( O3 n& Q; A0 Z, T$ T$ Q; t! B
4.     </div>
   
5.     <div v-else-if="type === 'B'">
   2 P1 B, s$ M2 Z+ h  h
6.       B
   
7.     </div>
   3 l2 N9 J4 s( i' e* W) R1 o
8.     <div v-else-if="type === 'C'">
   $ T5 i5 i% \/ @/ s$ C; X4 Q
9.       C
   % E" K) q% x5 z" M# l+ E' R( q( k
10.     </div>
    4 J% ?, S: }3 O5 P
11.     <div v-else>
    - v" g; j* p- i" s$ F. {+ y' V
12.       Not A/B/C
    
13.     </div>
    
14. </div>
    
15.    
    
16. <script>
    
17. new Vue({
    + f: E" h" T3 W; l# ?' C
18.   el: '#app',
    & z+ H( E& f0 G0 \8 E; E
19.   data: {
    & `. U  p* r. `' G+ e
20.     type: 'C'
    $ @6 C9 ~& J6 X9 @. A3 b  N2 a/ [9 z9 s
21.   }
    
22. })
    
23. </script>

复制代码

1 o" W4 J/ c" T# P( h0 a8 I

v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。

v-show

我们也可以使用 v-show 指令来根据条件展示元素：

v-show 指令

1. <h1 v-show="ok">Hello!</h1>

复制代码

- L2 T$ K. a8 Z9 x2 z9 i8 t) T
% @9 `3 k( v! D# c8 M* I
, v% S* E+ |" B3 @5 ^
3 l7 c! |" \' `$ ~+ h, E3 ]