Vue.js 条件与循环

admin

条件判断v-if

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

v-if 指令

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

1. <div id="app">
   $ Q  M# K6 W3 d
2.     <p v-if="seen">现在你看到我了</p>
   
3.     <template v-if="ok">
     o/ S: O! u' a% h# b
4.       <h1>菜鸟教程</h1>
   
5.       <p>学的不仅是技术，更是梦想！</p>
   " m( L( X: d% \; Z
6.       <p>哈哈哈，打字辛苦啊！！！</p>
     S0 t! X4 k2 [. j$ r! \2 }! y: Z
7.     </template>
   0 g8 H1 r4 O% r3 @7 g/ Y) \
8. </div>
   % K7 W: C9 d9 k9 K
9.    
   
10. <script>
    
11. new Vue({
    
12.   el: '#app',
    & X8 L2 X, R& H+ a5 b3 n$ I
13.   data: {
    : @7 }2 g* ?3 E( f3 n8 G- i, [6 ^7 L
14.     seen: true,
    
15.     ok: true
      {7 @- M" w3 o# \- [/ D8 m  E
16.   }
    
17. })
    % e& L+ z: B& X% M4 v  X
18. </script>

复制代码

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

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

1. <!-- Handlebars 模板 -->
   1 m5 _' ]# x9 l  J& H
2. {{#if ok}}
   
3.   <h1>Yes</h1>
   ; H. c3 K9 D  [2 j* b7 P* j( X
4. {{/if}}

复制代码

v-else

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

v-else 指令

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

- w. \# _, U+ W/ e$ W9 E! Q

1. <div id="app">
   
2.     <div v-if="Math.random() > 0.5">
   
3.       Sorry
   7 Z8 O% j8 m& v/ w1 I, ^
4.     </div>
   
5.     <div v-else>
   
6.       Not sorry
   
7.     </div>
   
8. </div>
   
9.    
   
10. <script>
    7 d" V& w; V" Z/ T% ]
11. new Vue({
    
12.   el: '#app'
    / y- E; i0 |' }2 T0 t
13. })
    
14. </script>

复制代码

v-else-if

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

v-else 指令

判断 type 变量的值：

1. <div id="app">
   3 N; b6 L. K; o( \7 U( v
2.     <div v-if="type === 'A'">
   / S" ~2 r$ I/ @9 M6 b0 U
3.       A
   
4.     </div>
   
5.     <div v-else-if="type === 'B'">
   
6.       B
   ' J$ _6 Z( _; q" w0 d
7.     </div>
   . H8 r4 g% ?8 {1 a& [; h! Y
8.     <div v-else-if="type === 'C'">
   6 i7 |  T. R" R4 O& w
9.       C
   - Y8 w& Y- c/ a/ s+ G. f
10.     </div>
    2 D$ x3 B+ O) t9 y2 q
11.     <div v-else>
    * r4 h8 l3 g5 ^# R7 @8 S
12.       Not A/B/C
    0 k  V6 v& m6 Z
13.     </div>
    
14. </div>
    3 `6 Z7 W1 M8 T" d) b
15.    
    & m( R1 K1 n) l; y* I
16. <script>
    
17. new Vue({
    / ^* w9 q; }- l& j, N1 x
18.   el: '#app',
    5 l! y/ o7 j4 A, y1 v
19.   data: {
    # I) f7 A7 `4 F1 h4 C
20.     type: 'C'
    
21.   }
    
22. })
    0 v4 V/ v% w8 G; K7 Z' P: g. s
23. </script>

复制代码

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

v-show

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

v-show 指令

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

复制代码

) ^" n$ c$ E/ F; ?& k. m2 E, T

: `" @/ A9 o# C' S