Vue.js 条件与循环

admin

条件判断v-if

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

v-if 指令

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

1. <div id="app">
   : }$ ?# r( @6 X9 N& p, q0 V# ?# j
2.     <p v-if="seen">现在你看到我了</p>
   ( z% K, |" B  O7 g
3.     <template v-if="ok">
   & e9 [9 o; X; ^! Y7 |, A* o
4.       <h1>菜鸟教程</h1>
   
5.       <p>学的不仅是技术，更是梦想！</p>
   1 F5 @" n; A* P4 e
6.       <p>哈哈哈，打字辛苦啊！！！</p>
   $ g, i/ w; F7 M% [- y- h7 k9 _" r
7.     </template>
   6 c; T' ]# c5 m" t, b( s5 o
8. </div>
   
9.    
   
10. <script>
    ' _+ T, R6 h4 g* f3 F
11. new Vue({
    % k1 p& u5 u  X* G2 o* w
12.   el: '#app',
    
13.   data: {
    
14.     seen: true,
    
15.     ok: true
    , v6 o/ X5 G9 H8 P
16.   }
    
17. })
    
18. </script>

复制代码

, @2 s" g' _: |7 b

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

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

1. <!-- Handlebars 模板 -->
   
2. {{#if ok}}
   ; X# S$ E7 U2 s2 d) A2 [
3.   <h1>Yes</h1>
   . N- @! w/ D  t7 A3 `. O' s
4. {{/if}}

复制代码

v-else

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

v-else 指令

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

" F( `) J* G5 m2 Z# p0 R

1. <div id="app">
   ; R3 V$ q( Q0 T0 z- W
2.     <div v-if="Math.random() > 0.5">
   
3.       Sorry
   
4.     </div>
   ' A7 a- [3 }) z+ L& s2 k1 C
5.     <div v-else>
   & Y( p: D2 W! g  h1 k: P
6.       Not sorry
   
7.     </div>
   . d3 F2 z, q4 y: s. j
8. </div>
   
9.    
   2 H- Q% K! p5 ^
10. <script>
    ( ?+ q  u* j( V' |9 p
11. new Vue({
    
12.   el: '#app'
    
13. })
    8 r7 g4 q# `1 A' g4 t7 a9 |
14. </script>

复制代码

v-else-if

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

v-else 指令

判断 type 变量的值：

1. <div id="app">
   2 F) y  l& D$ L$ x4 r( B& M
2.     <div v-if="type === 'A'">
     O3 J2 e- _  {: ^2 N" J+ d
3.       A
   : _9 S9 v1 u/ G; O! m
4.     </div>
   
5.     <div v-else-if="type === 'B'">
   ' a1 {* t* X- T5 l- J3 _7 y' k$ H
6.       B
   
7.     </div>
   
8.     <div v-else-if="type === 'C'">
   3 ?, h- Y# g, K; [# L# p$ o; P
9.       C
   # g4 k% G+ q1 l: \% C
10.     </div>
    
11.     <div v-else>
    
12.       Not A/B/C
    3 K  f# r1 v: b4 {' w
13.     </div>
    & D6 z' X; T3 P
14. </div>
    
15.    
    
16. <script>
    
17. new Vue({
    
18.   el: '#app',
    4 j; V8 J, W0 l4 M- o/ u
19.   data: {
    % P5 r3 t$ `: Y! M7 ?2 ~
20.     type: 'C'
    + F/ h, |2 w1 v
21.   }
    3 e9 j. h) A+ J5 N; k
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>

复制代码

! ]  \7 s" @+ {% D