Vue.js 条件与循环

admin

条件判断v-if

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

v-if 指令

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

1. <div id="app">
   
2.     <p v-if="seen">现在你看到我了</p>
   4 N5 c0 w5 T! T- a
3.     <template v-if="ok">
   ' K2 c7 M  N6 s( I+ k( a
4.       <h1>菜鸟教程</h1>
   5 \9 t# W: N9 s9 ]/ ?
5.       <p>学的不仅是技术，更是梦想！</p>
   / b! R2 Z2 Y1 i) S$ ^) e" A7 k
6.       <p>哈哈哈，打字辛苦啊！！！</p>
   6 ^2 B# |1 u6 Q. s
7.     </template>
   : ^- f# n1 P1 J# Y6 A0 i
8. </div>
   # P- Y* ~0 `! o* K  M' F  p
9.    
   6 d4 h# l3 D2 E1 m1 e
10. <script>
    
11. new Vue({
    
12.   el: '#app',
    ' t/ z3 r' G4 J0 A8 v: u' I
13.   data: {
    
14.     seen: true,
    7 L6 a6 i% w0 v3 l9 p
15.     ok: true
    
16.   }
    
17. })
    7 n4 H1 R) s2 _9 r0 u, o
18. </script>

复制代码

3 L1 q* u" V4 y1 I# r$ K

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

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

1. <!-- Handlebars 模板 -->
   
2. {{#if ok}}
   5 G* y5 O5 z# ?4 |/ Y( H, g8 s
3.   <h1>Yes</h1>
   
4. {{/if}}

复制代码

v-else

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

v-else 指令

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

9 }7 m5 T7 m6 Y0 F1 }

1. <div id="app">
   
2.     <div v-if="Math.random() > 0.5">
   
3.       Sorry
   ! Z! b5 v! z) m5 `% Y6 z# n
4.     </div>
   
5.     <div v-else>
   # L* C! |+ g" d  C( x# ?8 k$ ]' p+ g
6.       Not sorry
   
7.     </div>
   - h' v3 K0 z$ R4 g" V. ?6 d, y
8. </div>
   : R" U4 W6 ?1 u$ o' V& [  W% m2 H
9.    
   4 o' x: n4 c0 {
10. <script>
    7 X4 y% {% x' @3 V! h7 p
11. new Vue({
    + b8 V, T! |6 P6 {" v0 ?
12.   el: '#app'
    + V; c% A5 z' [# r7 r# ^
13. })
    5 ^& ^6 W! ~3 C* ]
14. </script>

复制代码

v-else-if

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

v-else 指令

判断 type 变量的值：

; a' w8 H9 j. N" G

1. <div id="app">
   2 z; Q; i2 V3 M" ~/ E
2.     <div v-if="type === 'A'">
   
3.       A
   
4.     </div>
   ; C  m4 l, V3 A# A: I4 Z/ L7 F3 T
5.     <div v-else-if="type === 'B'">
   9 a3 r) b* L, K7 ?7 B
6.       B
   
7.     </div>
   : r$ D, l- N$ ?7 p; h  s' c
8.     <div v-else-if="type === 'C'">
   ' ]& c9 f% n1 X3 {/ f
9.       C
   
10.     </div>
    
11.     <div v-else>
    - q  ]6 ~1 y6 M0 B" d3 E9 p4 m
12.       Not A/B/C
    7 ~2 q4 x- ?0 \5 X/ `( L" e* D
13.     </div>
    
14. </div>
    
15.    
    # x9 c" Y: t. Q1 z: H0 m
16. <script>
    
17. new Vue({
    
18.   el: '#app',
    & M- F* C; e; ]4 H4 S
19.   data: {
    
20.     type: 'C'
    
21.   }
    % e5 b/ D9 r- c7 J% d) g3 K: f
22. })
    ( f0 P5 A* E4 @/ U5 N9 y
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>

复制代码

2 w: g& s8 g& q) Q! h0 [3 L; b7 T
% a. c4 Z4 C6 [7 ]; d. b