Vue.js 条件与循环

admin

条件判断v-if

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

v-if 指令

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

1. <div id="app">
   
2.     <p v-if="seen">现在你看到我了</p>
   / a9 m) `) Q3 Q2 T% `
3.     <template v-if="ok">
   & b0 V7 O6 Y" v# i+ U3 a: R
4.       <h1>菜鸟教程</h1>
   
5.       <p>学的不仅是技术，更是梦想！</p>
   
6.       <p>哈哈哈，打字辛苦啊！！！</p>
   5 @; O$ {/ Z% F: W) \7 ]( U
7.     </template>
   & s4 C1 d" ^' T2 A) J" F8 }: _
8. </div>
   
9.    
   # X* P! H2 |2 J
10. <script>
    
11. new Vue({
    ( `( N; ?3 y+ o2 E  q  }6 G2 i- j
12.   el: '#app',
    
13.   data: {
    1 D! Q+ H- C+ H7 t9 x
14.     seen: true,
    * {5 m9 C6 k$ x$ I7 H3 S. p
15.     ok: true
    
16.   }
    
17. })
    , r* C) u3 E* F
18. </script>

复制代码

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

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

1. <!-- Handlebars 模板 -->
   & b7 x; T  o( [# v  S; R' m6 ]
2. {{#if ok}}
   
3.   <h1>Yes</h1>
   8 M& J9 v# W: z$ F) U0 ^
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">
   
3.       Sorry
   
4.     </div>
   " O1 \' O$ S1 E  H- v# Q9 l
5.     <div v-else>
   ) r+ H! y' f2 S2 u" H' V" S/ H; l
6.       Not sorry
   
7.     </div>
   
8. </div>
   1 z) b# a' w( Y" U* H
9.    
   
10. <script>
    : d& u# h) b' R" W2 t7 O
11. new Vue({
    ; m- H8 }5 x7 u4 L3 @' d
12.   el: '#app'
    
13. })
    
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'">
   8 W$ t; O6 c5 R* l4 Q* c: A
3.       A
   5 Z  j9 a) D! U! J
4.     </div>
   
5.     <div v-else-if="type === 'B'">
   
6.       B
   7 L. H+ p% j. D" k
7.     </div>
   
8.     <div v-else-if="type === 'C'">
   
9.       C
   
10.     </div>
    ! O# [0 S! p% N4 h2 b
11.     <div v-else>
    6 M- w7 ]1 X/ E; b3 A
12.       Not A/B/C
    1 @: z- y% k2 j# B9 ]8 k. d
13.     </div>
    : i, i0 @, |" T( ~3 Z5 n. t% ]; Y
14. </div>
    4 y$ [/ B5 i/ I! [4 o& R
15.    
    
16. <script>
    
17. new Vue({
    2 N6 U8 V: _" z
18.   el: '#app',
    * E) R" h; C$ T7 I1 a7 H1 d
19.   data: {
    & ~* @/ [7 S% q1 D" I
20.     type: 'C'
    8 s$ F) S. T: y4 x! C4 q/ u. v. D. C
21.   }
    
22. })
    
23. </script>

复制代码

8 r5 }1 I5 e! g# c" m

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

v-show

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

v-show 指令
" E0 C6 f4 U5 K6 L4 T1 E5 V. K( `

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

复制代码

3 m; y* x3 C- E( a7 \# i

* m' e% i4 E2 B8 H) ^& ]
9 c; F8 i  H8 ?0 \5 W  ~- f