Vue.js 条件与循环

admin

条件判断v-if

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

v-if 指令

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

1. <div id="app">
   
2.     <p v-if="seen">现在你看到我了</p>
   
3.     <template v-if="ok">
   
4.       <h1>菜鸟教程</h1>
   : D% b+ V, S  n8 u: Q6 o
5.       <p>学的不仅是技术，更是梦想！</p>
   : j' M4 @) D( t
6.       <p>哈哈哈，打字辛苦啊！！！</p>
   
7.     </template>
   
8. </div>
   
9.    
   
10. <script>
    
11. new Vue({
    
12.   el: '#app',
    - J* W3 W7 p& M2 r. {: x. `) L
13.   data: {
    
14.     seen: true,
    
15.     ok: true
    
16.   }
    
17. })
    
18. </script>

复制代码

/ N+ z9 I6 }( k6 I2 R$ A, g

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

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

1. <!-- Handlebars 模板 -->
   
2. {{#if ok}}
   
3.   <h1>Yes</h1>
   
4. {{/if}}

复制代码

v-else

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

v-else 指令

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

1. <div id="app">
   # A7 [( y6 t) L' r5 K, y
2.     <div v-if="Math.random() > 0.5">
   
3.       Sorry
   ' q! |4 C( }; F6 t) y& Y
4.     </div>
   / H  K2 W: s8 I( J0 T
5.     <div v-else>
   " F2 \- d; P$ f5 J
6.       Not sorry
   
7.     </div>
   + |! [8 Y* ~+ I! D8 ^5 \' q
8. </div>
   4 L! P: |& ~$ n. V
9.    
   2 r- x& g9 t0 ^
10. <script>
    
11. new Vue({
    ! f" u& @! |) F+ D
12.   el: '#app'
    9 h& D7 Y6 c& @% E. p& W$ J9 ]
13. })
    ! C  Y8 u, i: k, F+ D$ e
14. </script>

复制代码

v-else-if

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

v-else 指令

判断 type 变量的值：

, }) w( |: z: T

1. <div id="app">
   
2.     <div v-if="type === 'A'">
   : p9 i7 N8 b. |1 B6 y: d
3.       A
   
4.     </div>
   ' w9 r  v' Z1 \4 G. z) A
5.     <div v-else-if="type === 'B'">
   
6.       B
   * P$ C- F1 o$ F. W
7.     </div>
   
8.     <div v-else-if="type === 'C'">
   , d" D* U/ s) o$ d* L1 F$ F' z
9.       C
   
10.     </div>
    3 V4 ]1 q- [$ f/ Q$ L6 k! e
11.     <div v-else>
    % M, k  U& O4 D9 |; n$ K- W" E
12.       Not A/B/C
    ) n( i3 U! k/ J. \9 L1 P% j
13.     </div>
    " w& g7 G# \( f
14. </div>
    + [- ^  S( M8 P/ p7 O5 X4 n/ l
15.    
    1 g0 V0 R7 }* ^) _
16. <script>
    
17. new Vue({
    2 L% s& N% R+ t# d
18.   el: '#app',
    ! [3 `; w$ J4 p  r! r/ L
19.   data: {
    
20.     type: 'C'
    4 a* P$ F# I- ?; u  ~
21.   }
    ( {( O" h/ k$ I$ g
22. })
    ) p. X6 N; W9 v; f6 N6 Z3 S- Z% \" t
23. </script>

复制代码

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

v-show

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

v-show 指令
- o4 ~1 y6 \0 _' H8 j

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

复制代码

. M, v. u; R& I5 i$ o
: v; `) w0 L' w: J* }