Vue.js 条件与循环

admin

条件判断v-if

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

v-if 指令

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

1. <div id="app">
   $ S# _4 T9 W& G& h6 U" q8 Z
2.     <p v-if="seen">现在你看到我了</p>
   
3.     <template v-if="ok">
   
4.       <h1>菜鸟教程</h1>
   
5.       <p>学的不仅是技术，更是梦想！</p>
   , g' m: q: v* h# G. ^: P
6.       <p>哈哈哈，打字辛苦啊！！！</p>
   ) z& a1 j: M8 ?; k
7.     </template>
   0 O/ e6 i  t5 D5 |: L
8. </div>
   + k5 O. _/ [( v% \& O  p( T
9.    
   : a  ?% L$ I9 N/ \/ _' C; W
10. <script>
    1 R, E8 z) A# T* s8 T) y) ^
11. new Vue({
    / N2 y) ~- L2 r8 X/ ^2 i& s
12.   el: '#app',
    
13.   data: {
    $ q" k/ j+ `" ?1 C# X) I
14.     seen: true,
    
15.     ok: true
    - L" r3 c, `, J, h, L
16.   }
    
17. })
    , Q. c0 ~/ @5 n  H8 ]/ f; n. `
18. </script>

复制代码

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

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

1. <!-- Handlebars 模板 -->
   
2. {{#if ok}}
   ( e5 X" H% y9 z) t: u
3.   <h1>Yes</h1>
   # `0 f. ^  f7 M& s
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">
   # j+ I5 i, }8 Q% m' x) G& B; F* E
3.       Sorry
   ; q) T& q' d: v. T$ T
4.     </div>
   
5.     <div v-else>
   
6.       Not sorry
   
7.     </div>
   7 d9 @6 p; @8 z" g/ {
8. </div>
   
9.    
   2 k+ Q" e. o& d; e; w
10. <script>
    
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 变量的值：

1. <div id="app">
   - h' ]! h: U( B  r; n  f/ F
2.     <div v-if="type === 'A'">
   
3.       A
   
4.     </div>
   . K- D% b( E9 J; u. {% {1 R- \
5.     <div v-else-if="type === 'B'">
   ) ]: l7 G% B! ~3 D
6.       B
   
7.     </div>
   
8.     <div v-else-if="type === 'C'">
   + s" g/ A4 s" ~0 i& w% c" G
9.       C
   9 N& [% C4 f& @# _! z
10.     </div>
    . I# k9 A8 M, n( E  K) q( K+ G4 y
11.     <div v-else>
    ( P; m5 c9 r0 H: q' A
12.       Not A/B/C
    
13.     </div>
    , ?/ Z* P9 X9 D" j
14. </div>
    % ^$ S2 B% ]) u' g
15.    
    
16. <script>
    
17. new Vue({
    
18.   el: '#app',
    
19.   data: {
    + F( m) u. x. Q# X) p
20.     type: 'C'
    . l  T# \0 W) ^0 L( b: G! A
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>

复制代码

9 ~5 m2 {. a% T$ Z! o2 K$ T: M
- f' P; @  i3 Q5 z6 p

& g7 H0 Z- J, \+ |" a5 |