Vue.js 条件与循环

admin

条件判断v-if

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

v-if 指令

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

1. <div id="app">
   
2.     <p v-if="seen">现在你看到我了</p>
   
3.     <template v-if="ok">
   
4.       <h1>菜鸟教程</h1>
   $ O! t; \, l( x; @; w* Y3 q* [. }
5.       <p>学的不仅是技术，更是梦想！</p>
   5 a6 T3 b  ?' P; p. Y& n0 v. }: h& s
6.       <p>哈哈哈，打字辛苦啊！！！</p>
   6 R; E* Q$ z/ x/ S
7.     </template>
   : G  q9 \" E( k8 C
8. </div>
   $ `+ [8 E" L& C9 x  U
9.    
   8 p; F% ~  C  R* R+ @2 g
10. <script>
    
11. new Vue({
    0 T) E5 I% g% B( g' g9 w0 o
12.   el: '#app',
    
13.   data: {
    5 C. d# Y3 l  b6 u( {& j3 L: |
14.     seen: true,
    $ H; N3 D# x. a9 r7 j% i$ i
15.     ok: true
    / z* R! `* ]9 j8 n7 e; s  w4 U/ x
16.   }
    - }& U) W8 P5 S' T; b0 j. B) F
17. })
    
18. </script>

复制代码

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

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

1. <!-- Handlebars 模板 -->
   
2. {{#if ok}}
   8 q" N% t3 c2 O3 T$ Z
3.   <h1>Yes</h1>
   6 J' |0 q8 t( B9 W. O
4. {{/if}}

复制代码

v-else

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

v-else 指令

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

" w# @! S  b* z* _8 q

1. <div id="app">
   0 L  F5 l# g4 l
2.     <div v-if="Math.random() > 0.5">
   9 U8 U: X' I2 y  m% }
3.       Sorry
   7 c$ n3 J" t+ v" h
4.     </div>
   6 N- A6 E+ \7 d! \0 x8 f
5.     <div v-else>
   ) }: @+ g) a* I
6.       Not sorry
   
7.     </div>
   
8. </div>
   
9.    
   ! F4 I$ E1 D7 p+ F1 D! k- M
10. <script>
    ( h" ?) [- s- U. d7 V
11. new Vue({
    
12.   el: '#app'
    ( D# ^: o3 B: V2 n+ q3 w5 D) v
13. })
    
14. </script>

复制代码

v-else-if

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

v-else 指令

判断 type 变量的值：

  k9 [# y, G) G1 r! f2 M0 k& d

1. <div id="app">
   
2.     <div v-if="type === 'A'">
   3 Y. b6 v) b4 f! b6 _/ [, s
3.       A
   
4.     </div>
   
5.     <div v-else-if="type === 'B'">
   
6.       B
   
7.     </div>
   # o7 l5 A) B; }8 _
8.     <div v-else-if="type === 'C'">
   
9.       C
   
10.     </div>
    % b+ ^& J, O1 M% R
11.     <div v-else>
    
12.       Not A/B/C
    
13.     </div>
    9 N, a' R# O$ u- R: x( K1 k" s- D
14. </div>
    
15.    
    & c9 z4 _! ~! ?1 n- c, ^% w% L8 ~
16. <script>
    * `( D, k. l; h6 Q% o. g
17. new Vue({
    
18.   el: '#app',
    " V$ {$ ]6 h7 b1 y1 u& w2 o
19.   data: {
    6 a- @( D: _7 ~* j
20.     type: 'C'
    
21.   }
    
22. })
    
23. </script>

复制代码

3 g0 Y9 V; S5 h8 |, R, E* x* I7 M

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

v-show

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

v-show 指令

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

复制代码

& |0 }+ @0 G0 {$ j  _: D
% d, E' |( a/ v  W$ J