Vue.js 条件与循环

admin

条件判断v-if

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

v-if 指令

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

1. <div id="app">
   
2.     <p v-if="seen">现在你看到我了</p>
   & d  m: f: T4 C: N5 a
3.     <template v-if="ok">
   " q: z' r* Q8 O+ A
4.       <h1>菜鸟教程</h1>
   
5.       <p>学的不仅是技术，更是梦想！</p>
   3 ]! a3 e5 u6 P/ Y9 S& W+ j! [
6.       <p>哈哈哈，打字辛苦啊！！！</p>
   ! I8 C4 T+ c3 r1 P# F
7.     </template>
   8 _. Z% u9 F6 C
8. </div>
   
9.    
   ' ~/ O. |# D6 @
10. <script>
    ) d4 G7 R4 Q! q% }, }6 ?, K
11. new Vue({
    
12.   el: '#app',
    
13.   data: {
    
14.     seen: true,
    
15.     ok: true
    
16.   }
    * d( D  ^. P, R. Q: z2 I5 }* ^9 w
17. })
    
18. </script>

复制代码

( Z0 s# @2 |1 H+ j: m2 G

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

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

1. <!-- Handlebars 模板 -->
   , k( z9 ~" p: H. [# n3 U6 b
2. {{#if ok}}
     a0 s2 j& p4 [. D
3.   <h1>Yes</h1>
     L$ L2 ~$ t5 p9 w5 o+ A
4. {{/if}}

复制代码

v-else

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

v-else 指令

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

) `8 g. \" L* B' u3 L

1. <div id="app">
   
2.     <div v-if="Math.random() > 0.5">
   " _% w8 t) H2 r5 y4 `
3.       Sorry
   
4.     </div>
   
5.     <div v-else>
   % d6 ^1 C3 \( g0 ^, T$ G5 N% Y
6.       Not sorry
   
7.     </div>
   - p* ~2 H  I( `) c- c" t
8. </div>
   0 Y: x  P. T! D* G3 v" N( c  N
9.    
   
10. <script>
    
11. new Vue({
    . W2 [4 m  i+ J" b/ [
12.   el: '#app'
    
13. })
    
14. </script>

复制代码

v-else-if

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

v-else 指令

判断 type 变量的值：

5 J2 g2 @# u, L3 S

1. <div id="app">
   
2.     <div v-if="type === 'A'">
   1 u8 K; b8 H( `, \
3.       A
   + v3 l$ j& @; {% `
4.     </div>
   9 R( k. S- P# }2 I) F& ~; R
5.     <div v-else-if="type === 'B'">
   
6.       B
   . \) R2 V& L: C
7.     </div>
   * C5 f8 K# h; F$ x3 e2 O
8.     <div v-else-if="type === 'C'">
   / d/ }  M5 T2 H
9.       C
   
10.     </div>
    6 a: u- x+ S. x' x. A
11.     <div v-else>
    # a) Q: ~9 J- E, ]
12.       Not A/B/C
    
13.     </div>
    % w5 \, O7 x& C2 ?! l$ k/ l
14. </div>
    ' z4 x/ z4 H* s3 n$ i* Y+ K
15.    
    ; p+ N. p  Q; C5 L
16. <script>
    - {, X2 Z! J7 N. _( A/ j7 A! H7 Q" e! u" \
17. new Vue({
    
18.   el: '#app',
    / A' w) u8 o, {! `/ {2 B. f5 G
19.   data: {
    ; h* u' {7 R% E/ ]' |
20.     type: 'C'
    4 f% e$ }6 {9 k
21.   }
    ( b! Z  |( s# B% c2 I
22. })
    . _' E3 Q9 y, H/ a7 Z7 |
23. </script>

复制代码

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

v-show

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

v-show 指令
: m7 t- I9 u; A) [! P$ I; y7 W! z1 Q* @

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

复制代码

1 _7 Z% J9 P2 l7 a% [- ^- G% _8 j+ X
+ u7 I5 _+ r4 a# p1 ]- c+ E