Vue.js 条件与循环

admin

条件判断v-if

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

v-if 指令

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

1. <div id="app">
   ' u* w1 l3 S% m8 t
2.     <p v-if="seen">现在你看到我了</p>
   : I/ h1 d" B; o9 Q7 D
3.     <template v-if="ok">
   ! r5 ~* M( p: D6 M7 C: A
4.       <h1>菜鸟教程</h1>
   
5.       <p>学的不仅是技术，更是梦想！</p>
   
6.       <p>哈哈哈，打字辛苦啊！！！</p>
   : ]1 F+ }1 c4 E
7.     </template>
   
8. </div>
   
9.    
   
10. <script>
    
11. new Vue({
    " M" O/ \  E& Z& X2 T
12.   el: '#app',
    & @: @- k% m8 ^7 s8 a( o! ~+ e
13.   data: {
    * j0 B* x$ Y) |& `
14.     seen: true,
    ( b' X: @1 A0 c: D# h
15.     ok: true
    
16.   }
    : u- O" v  j0 e- c7 @6 N5 G
17. })
    & Z6 b' H0 a3 z0 \2 D' d1 b# w/ @
18. </script>

复制代码

" X4 r# ~; i8 }5 b4 t) c

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

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

1. <!-- Handlebars 模板 -->
   
2. {{#if ok}}
   3 o  y( c# ?0 e* g- r" ~6 f' q
3.   <h1>Yes</h1>
   # U$ G9 K2 q! e: ]
4. {{/if}}

复制代码

v-else

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

v-else 指令

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

' r; `; E/ V) K3 r7 \, C( h- ]

1. <div id="app">
   # X5 h& q, v9 K3 _: @6 e
2.     <div v-if="Math.random() > 0.5">
   
3.       Sorry
   
4.     </div>
   ; L0 G- n$ E2 _
5.     <div v-else>
   
6.       Not sorry
   + S; T* H& a+ E- p& I; ~( q; y- H2 e
7.     </div>
   : ?5 z1 ^! J3 L
8. </div>
   
9.    
   # L9 t5 r3 r# [9 y2 f3 K
10. <script>
    . M6 s/ j6 J$ ?8 |
11. new Vue({
    
12.   el: '#app'
    1 U5 W; ]  j7 e' d# m
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'">
   3 k0 N* o# e$ I. b7 o
3.       A
   9 C4 N% c$ G# e5 R$ M& X
4.     </div>
   
5.     <div v-else-if="type === 'B'">
   ; T' D# e' ?1 H! P0 R( _1 Q5 t
6.       B
   ; B5 V4 ~+ I0 @! O' f; U; ]
7.     </div>
   
8.     <div v-else-if="type === 'C'">
   0 l" i. a$ F3 q& w$ ?) t9 O
9.       C
   
10.     </div>
    : _$ D/ }, P& A0 P' k9 |
11.     <div v-else>
    
12.       Not A/B/C
    
13.     </div>
    
14. </div>
    
15.    
    
16. <script>
    
17. new Vue({
    
18.   el: '#app',
    
19.   data: {
    5 Z. E" d# i& V( G: D
20.     type: 'C'
    
21.   }
    
22. })
    
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>

复制代码

4 f* `( E1 U, {7 `! ~: q' ]