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">
   - N& {1 z/ _# l
4.       <h1>菜鸟教程</h1>
   
5.       <p>学的不仅是技术，更是梦想！</p>
   
6.       <p>哈哈哈，打字辛苦啊！！！</p>
   0 p$ d* \( e9 @( u7 o9 X# h
7.     </template>
   
8. </div>
   * F1 W9 C3 |' ]
9.    
   
10. <script>
    : q$ @( }2 O! |
11. new Vue({
    & S8 y( v) [1 @' H
12.   el: '#app',
    
13.   data: {
    
14.     seen: true,
    
15.     ok: true
    
16.   }
    / S4 \5 T& a5 T* I! m! A
17. })
    + L* D- j4 F  U; Q; J, I
18. </script>

复制代码

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

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

1. <!-- Handlebars 模板 -->
     {5 A" ^9 y0 ^5 Y* [
2. {{#if ok}}
   $ y, x6 Y1 [  I  @$ L5 D3 @! y
3.   <h1>Yes</h1>
   
4. {{/if}}

复制代码

v-else

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

v-else 指令

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

1. <div id="app">
   
2.     <div v-if="Math.random() > 0.5">
   7 `5 ?  r! Q% n# Y4 r
3.       Sorry
   * L0 x: g* L. A% \9 m7 F
4.     </div>
   . v. S) r6 G' h# g" @
5.     <div v-else>
   $ y& `2 C. m5 K9 l( l$ X
6.       Not sorry
   - _0 C/ T# {: v& n( ^3 P0 d/ F
7.     </div>
   
8. </div>
   4 m. Y) d. N, p" n. X
9.    
   
10. <script>
    & A2 R0 T* \1 R1 |( n/ K% }" ~7 V
11. new Vue({
    ! l8 A: N; Q) X
12.   el: '#app'
    # E- V0 n# B6 W- w
13. })
    - l' T; W' a& W
14. </script>

复制代码

v-else-if

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

v-else 指令

判断 type 变量的值：

& D6 X$ H. |' Q8 ]# `

1. <div id="app">
   * |$ _2 @4 q9 ?- a' ^
2.     <div v-if="type === 'A'">
   
3.       A
   * w3 q, `' X- Q: S( x% j
4.     </div>
   ) \1 M3 m$ w  l) y5 f, D3 R
5.     <div v-else-if="type === 'B'">
   % l: W6 W3 S' }/ Y; V' E
6.       B
   
7.     </div>
   0 }- b; y( W6 a( Q0 v2 ^7 c
8.     <div v-else-if="type === 'C'">
   4 I1 k2 o. v' m5 ]* c5 J
9.       C
   / J, G1 D2 E  O4 b8 \
10.     </div>
    
11.     <div v-else>
    
12.       Not A/B/C
    
13.     </div>
    
14. </div>
    
15.    
    
16. <script>
    4 N/ a1 L: s* }" m: Q
17. new Vue({
    ! A+ e2 e8 W8 l/ x
18.   el: '#app',
    / C$ Q) `. K0 ^3 R) p
19.   data: {
    4 l* u+ p1 H: P8 s2 L7 W' O* S
20.     type: 'C'
    % X* Z8 D1 t& ?! a0 j8 F: L7 J
21.   }
    7 {) S2 d/ R) R5 i
22. })
    
23. </script>

复制代码

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

v-show

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

v-show 指令
, w( T5 y4 Z) \. n

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

复制代码

. I  C* r/ s- m, x4 F* h, E9 y

, R! ]) r/ |4 w# s7 O