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>
   4 G! d# g2 }2 v# P: @% a3 _
5.       <p>学的不仅是技术，更是梦想！</p>
   ' N9 L. j( x* m! j) E  R
6.       <p>哈哈哈，打字辛苦啊！！！</p>
   
7.     </template>
   % X% h! e, O, a5 Q5 r. x
8. </div>
   
9.    
   
10. <script>
    9 @; a' S/ S" Q' V/ n. R' N
11. new Vue({
    ' H2 X6 w/ k3 T" e
12.   el: '#app',
    ; _4 ]$ e7 ?1 S  h; t( N& X2 }& j  o
13.   data: {
    
14.     seen: true,
    , Q5 @  \; N1 k
15.     ok: true
    
16.   }
    
17. })
    , x5 g( M0 q- p6 Z# ~2 [8 h
18. </script>

复制代码

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

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

1. <!-- Handlebars 模板 -->
   
2. {{#if ok}}
   ! f. a" @) c6 q7 _6 K
3.   <h1>Yes</h1>
   9 Z5 u  z: g4 R. `( j, ]/ D
4. {{/if}}

复制代码

v-else

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

v-else 指令

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

/ E; l3 \2 \" i! y6 n0 C

1. <div id="app">
   
2.     <div v-if="Math.random() > 0.5">
   
3.       Sorry
   9 A% Y" e! Z& L# q# U% O
4.     </div>
   
5.     <div v-else>
   $ j7 N& h+ N# \
6.       Not sorry
   
7.     </div>
   8 i8 R6 ?4 d  `- T+ K2 x9 w0 e  |2 B* t
8. </div>
   
9.    
   2 ]& `. U3 ~' W  Q4 I6 c
10. <script>
    
11. new Vue({
    
12.   el: '#app'
    
13. })
    
14. </script>

复制代码

v-else-if

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

v-else 指令

判断 type 变量的值：

, |8 I" v6 u2 t6 P6 m. H

1. <div id="app">
   
2.     <div v-if="type === 'A'">
   9 M9 I5 Z; J* ^# F  ]1 ]5 T( J
3.       A
   
4.     </div>
   - F  Q( x3 n2 j
5.     <div v-else-if="type === 'B'">
   : Q8 n) C: x, g% p3 |9 T9 r
6.       B
   - l1 J0 e3 k2 ~" R# N6 Q
7.     </div>
   0 A  b$ I/ Z$ F' e
8.     <div v-else-if="type === 'C'">
   
9.       C
   7 s5 @9 C: ~' B) h1 ?4 _
10.     </div>
    
11.     <div v-else>
    
12.       Not A/B/C
    
13.     </div>
    
14. </div>
    ; u) o& x' `3 K; o( P) M) V8 f# M0 t9 h
15.    
    
16. <script>
    : W" I2 a' V) T7 l1 g( B% n
17. new Vue({
    
18.   el: '#app',
    * C' Z; E! y% y: M6 {( q
19.   data: {
    " `3 a3 D) m1 P' T
20.     type: 'C'
    ' ~4 Y! {9 e! Y2 ~  v* R
21.   }
    
22. })
      v0 D& E- e( l& V7 F
23. </script>

复制代码

1 Z9 Y/ P8 s1 Z

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

v-show

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

v-show 指令

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

复制代码