Vue.js 条件与循环

admin

条件判断v-if

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

v-if 指令

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

1. <div id="app">
   # d* V0 v  R0 T3 F! {1 [
2.     <p v-if="seen">现在你看到我了</p>
   " p# L7 t; s" H
3.     <template v-if="ok">
   ( {7 F) Q6 [; O. h; l
4.       <h1>菜鸟教程</h1>
   $ y: h- g- q2 X, Z( e: a# D
5.       <p>学的不仅是技术，更是梦想！</p>
   
6.       <p>哈哈哈，打字辛苦啊！！！</p>
   3 u  j& ^6 z+ |+ X
7.     </template>
   
8. </div>
   0 {" a6 u- e4 A' f  I
9.    
   - L( \+ u/ m5 Z$ S2 D. Q
10. <script>
    ( Q- ~+ C: i. x( b; [
11. new Vue({
    7 ]# `4 z* E2 }% _. }
12.   el: '#app',
    1 c0 x) N% k) D% D/ I, E, A
13.   data: {
    3 I" G3 w+ c6 X- `9 n
14.     seen: true,
    
15.     ok: true
    - s( F, P) J  }) e8 r
16.   }
    
17. })
    ( [4 T- l! m' ]0 v% S7 c8 ^) ~1 o
18. </script>

复制代码

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

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

1. <!-- Handlebars 模板 -->
   : q+ U. t- r! @) k$ r4 n6 r  a: \
2. {{#if ok}}
   ) o. D' c  K  J! D" X/ f
3.   <h1>Yes</h1>
   2 D. K; p% ~" }$ o2 l: A7 u
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 s3 Q, E9 ]+ H: t. `9 }& M' w) T
3.       Sorry
   
4.     </div>
   ; e( B1 R$ M# A! s; J+ ~' \1 T
5.     <div v-else>
   , p% Y: G2 V4 d, ~, @7 Z( L; I: }
6.       Not sorry
   
7.     </div>
   ( P* k- B: p1 r0 ]
8. </div>
   " Y: d# I$ B: R7 x
9.    
   7 w, L; K2 o; L* y4 u/ g4 _7 ~
10. <script>
    $ n) n1 I1 M( Z& l
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 变量的值：

& V8 G7 H  z1 S/ {; B

1. <div id="app">
   1 ^5 V6 N$ q6 |, _" ?
2.     <div v-if="type === 'A'">
   0 V% C9 P3 J9 k5 T9 y
3.       A
   & P, f; N5 o1 w3 `% O' Y( N
4.     </div>
   
5.     <div v-else-if="type === 'B'">
   4 z2 ]* B- @! `5 V* Z
6.       B
   
7.     </div>
   
8.     <div v-else-if="type === 'C'">
   5 \7 n4 i1 M/ u! z$ s
9.       C
   
10.     </div>
    
11.     <div v-else>
    
12.       Not A/B/C
    
13.     </div>
    
14. </div>
    4 {: @9 _5 h; H* n- C- q' q# N
15.    
    
16. <script>
    
17. new Vue({
    0 b2 L' z, j+ W0 e3 U; G: B
18.   el: '#app',
    9 V( |  Q# l: x( j( @3 [( V% c- ?) r
19.   data: {
    
20.     type: 'C'
    7 `) k3 r  E: G% X# Q/ Y: ^' d
21.   }
    
22. })
    8 j) c# U1 B9 H  U
23. </script>

复制代码

! ~3 J' z8 X& L7 {

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

v-show

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

v-show 指令
* R& x+ o$ |6 z  c7 `

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

复制代码

& B3 g: Y0 L0 P8 N( e
/ I8 z; J, K7 M! Z
# F- U" W+ U$ p' }# R' E' d2 Z
8 ]' d. z. u( s9 F# p& A5 n2 C