Vue.js 条件与循环

admin

条件判断v-if

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

v-if 指令

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

1. <div id="app">
   / @6 g; C8 c' Y& P: i
2.     <p v-if="seen">现在你看到我了</p>
   
3.     <template v-if="ok">
   
4.       <h1>菜鸟教程</h1>
   
5.       <p>学的不仅是技术，更是梦想！</p>
   
6.       <p>哈哈哈，打字辛苦啊！！！</p>
   4 X% m; A* u+ C$ F' \9 s0 q- S+ u
7.     </template>
   
8. </div>
   
9.    
   0 V# B( V: R! J8 r% g( N
10. <script>
    
11. new Vue({
    
12.   el: '#app',
    
13.   data: {
    1 J5 ?% X$ E, @' y
14.     seen: true,
    ' [- y# ^: `' L* S8 v
15.     ok: true
    
16.   }
    " K& |  Y' N# z+ C& y
17. })
    0 \3 H9 v  @5 c+ n  P9 \' Q1 h
18. </script>

复制代码

- V6 N3 `8 j, l% m/ D. C" y

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

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

1. <!-- Handlebars 模板 -->
   9 l) {6 A% U5 [0 N) Y6 [; M
2. {{#if ok}}
   : D9 s$ ~  K1 g
3.   <h1>Yes</h1>
   
4. {{/if}}

复制代码

v-else

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

v-else 指令

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

6 P! w6 l! g7 ]$ x& I

1. <div id="app">
   
2.     <div v-if="Math.random() > 0.5">
   : L" v4 d8 B; O* l8 N
3.       Sorry
   ; K8 X8 I6 B7 m2 Y. Q
4.     </div>
   2 M4 G: p) Y, y, a/ T4 c) v8 U+ `
5.     <div v-else>
   2 ~+ S0 N! B2 C" {# q
6.       Not sorry
   5 ~2 F8 V& w: C! ~  A) w* a
7.     </div>
   
8. </div>
   
9.    
   
10. <script>
    , n# }; E0 y3 n$ R) a+ H) @
11. new Vue({
    
12.   el: '#app'
    5 Z) g4 ?. A' I
13. })
    
14. </script>

复制代码

v-else-if

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

v-else 指令

判断 type 变量的值：

1 P* W! ]" w2 m$ ~$ I2 n  r9 T

1. <div id="app">
   0 g$ i* V% w" `# p: M
2.     <div v-if="type === 'A'">
   
3.       A
   ' {  p+ t5 \; K: `* I3 m/ Z0 P
4.     </div>
   
5.     <div v-else-if="type === 'B'">
   & Q+ P: C( f$ f1 {/ X' }
6.       B
   ; z8 h' E7 j5 P" K) J2 O( `) _
7.     </div>
   
8.     <div v-else-if="type === 'C'">
   ' A$ o/ |/ [0 G0 u$ y, u
9.       C
   
10.     </div>
    
11.     <div v-else>
    
12.       Not A/B/C
    
13.     </div>
    6 G, Z( K( ?4 D- ]7 k$ k3 s
14. </div>
    
15.    
    - }; f. {/ o; M# ^0 K
16. <script>
    " q4 |5 T) ~' C# _% `
17. new Vue({
    * m8 ]- v( ]5 B8 i
18.   el: '#app',
    + [7 A3 i* w, K) G/ \  K; [% z
19.   data: {
    
20.     type: 'C'
    , f& E& t! d, N# K
21.   }
    , c; u: ?( t. S% U0 E- H) j
22. })
    
23. </script>

复制代码

2 V- w, [5 x2 V) H3 o( e4 I

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

v-show

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

v-show 指令
" c  h2 ~7 Q& Y% I+ M

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

复制代码