Vue.js 条件与循环

admin

条件判断v-if

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

v-if 指令

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

1. <div id="app">
   5 h: S( \& z, O! \
2.     <p v-if="seen">现在你看到我了</p>
   ( D# R! J* v$ E2 v; m
3.     <template v-if="ok">
   
4.       <h1>菜鸟教程</h1>
   & d* A7 V/ l9 q) S+ F2 z
5.       <p>学的不仅是技术，更是梦想！</p>
   
6.       <p>哈哈哈，打字辛苦啊！！！</p>
   
7.     </template>
   
8. </div>
   2 J) o; d- |/ c3 f$ v
9.    
   
10. <script>
    
11. new Vue({
    ( t! ~4 w9 E* r
12.   el: '#app',
    
13.   data: {
    , G) x# v/ g! k3 k
14.     seen: true,
    $ d) b" J; H# N/ c/ C
15.     ok: true
    
16.   }
    4 x! q- s% h  v& ]: F4 `
17. })
    
18. </script>

复制代码

! r+ I9 r% p) M

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

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

1. <!-- Handlebars 模板 -->
   ; t! ?! `7 u- Y5 P5 _( T" X
2. {{#if ok}}
   
3.   <h1>Yes</h1>
   
4. {{/if}}

复制代码

v-else

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

v-else 指令

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

9 m, a# C% X. u& w% T+ {

1. <div id="app">
   
2.     <div v-if="Math.random() > 0.5">
   & P. j2 C; a' `, |* {
3.       Sorry
   
4.     </div>
   * b% |, Z* N! @6 W5 Y( f
5.     <div v-else>
   + R) y3 @2 T8 u2 q5 v% y& E* H
6.       Not sorry
   
7.     </div>
   
8. </div>
   
9.    
   , w. R/ W; k4 S) W
10. <script>
    
11. new Vue({
    . O9 r! |1 G. p$ P0 C; M" A
12.   el: '#app'
    1 _% u8 ~# v+ G7 C5 m- H6 A
13. })
    ; N! ?1 O/ c! f$ L
14. </script>

复制代码

v-else-if

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

v-else 指令

判断 type 变量的值：

5 P, n2 n- R! T7 f$ o, V

1. <div id="app">
   ( m2 a9 m4 K/ d5 K0 {
2.     <div v-if="type === 'A'">
   
3.       A
   3 a( @) r+ g, S1 S$ e" D
4.     </div>
   
5.     <div v-else-if="type === 'B'">
   
6.       B
   . }1 [% S6 X* S" k& F  }1 E
7.     </div>
   6 z6 M- Z- a' L2 |. m
8.     <div v-else-if="type === 'C'">
   
9.       C
   
10.     </div>
    
11.     <div v-else>
    ' I+ b4 B( v5 S
12.       Not A/B/C
    
13.     </div>
    
14. </div>
    - O! d% O' w- r4 M) g. |1 q7 F
15.    
    2 v+ C0 {( P8 K" o  Y$ u
16. <script>
    
17. new Vue({
    " e, m3 ]6 U* t
18.   el: '#app',
    
19.   data: {
    
20.     type: 'C'
    
21.   }
    
22. })
    0 y6 \: Z% M2 n+ l& Q: b
23. </script>

复制代码

0 N9 @" F& C2 ^9 ]# F, r0 ?

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

v-show

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

v-show 指令

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

复制代码

; p3 w( n) O1 s+ W8 B) }

3 ~. Q2 Q0 x# f; C