Vue.js 条件与循环

admin

条件判断v-if

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

v-if 指令

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

1. <div id="app">
   8 l8 {: k( S3 T
2.     <p v-if="seen">现在你看到我了</p>
   ' X$ j0 M  h' n( o6 D
3.     <template v-if="ok">
   ; j/ M8 w. m9 s  h
4.       <h1>菜鸟教程</h1>
   4 d( }3 F8 o" ~- m; {$ S
5.       <p>学的不仅是技术，更是梦想！</p>
   8 _4 T* U% D4 S, J/ U4 j
6.       <p>哈哈哈，打字辛苦啊！！！</p>
   0 a' J# m* k" k. k5 x* b
7.     </template>
   ( O4 r8 [4 j+ V+ K5 K' z: E
8. </div>
   ' L, p5 R8 B8 K+ \5 }
9.    
     u$ w0 [5 \. M& w; U
10. <script>
    , d& ?0 W" S( W9 e' k% T
11. new Vue({
    ; r" P) B% Z" q
12.   el: '#app',
    
13.   data: {
    
14.     seen: true,
    
15.     ok: true
    * W4 y" t8 g7 s5 N( `8 I
16.   }
    9 s$ \+ G- P) K& X$ B+ p
17. })
    
18. </script>

复制代码

' N1 k5 I* _0 O0 w$ Q: a* k

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

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

1. <!-- Handlebars 模板 -->
   
2. {{#if ok}}
   2 F$ o) C  N9 ]5 i5 _3 l
3.   <h1>Yes</h1>
   
4. {{/if}}

复制代码

v-else

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

v-else 指令

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

1. <div id="app">
   & O- l' r" B6 m
2.     <div v-if="Math.random() > 0.5">
   
3.       Sorry
     \- K- f$ g/ Z4 Z5 u4 g+ |
4.     </div>
   
5.     <div v-else>
   
6.       Not sorry
   # z) x% m- C$ R0 r6 l6 H1 j
7.     </div>
   
8. </div>
   
9.    
   
10. <script>
    
11. new Vue({
    
12.   el: '#app'
    2 j: U4 ^3 z4 s: c2 N3 T
13. })
    ) b$ G' _  Q# r$ t
14. </script>

复制代码

v-else-if

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

v-else 指令

判断 type 变量的值：

1. <div id="app">
   
2.     <div v-if="type === 'A'">
   
3.       A
   
4.     </div>
   
5.     <div v-else-if="type === 'B'">
   
6.       B
   2 p7 s& Y! {: m$ y! x' R' ~! W
7.     </div>
   " I8 X; i5 }- [0 a. A
8.     <div v-else-if="type === 'C'">
   / S) T  _7 _3 u0 V1 ^
9.       C
   
10.     </div>
    4 \& \: j8 S/ z$ z- C
11.     <div v-else>
    
12.       Not A/B/C
    ! C2 U9 Z5 V* d1 g- R- h; u& t
13.     </div>
    ) e8 @, T0 I7 I8 f1 h+ E- Z
14. </div>
    
15.    
    8 x  ?' T% i% w; s0 W, x9 ]7 I# P
16. <script>
    2 E9 [. \. q4 m$ @
17. new Vue({
    ; I& ^4 [( `& c& h
18.   el: '#app',
    
19.   data: {
    
20.     type: 'C'
    
21.   }
    
22. })
    
23. </script>

复制代码

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

v-show

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

v-show 指令

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

复制代码

( B  G' Z, U, |- Y1 Z. ~0 ^" t
6 I4 J# Z2 ~- h4 |( ?