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">
   / j" h+ R7 G3 j! @
4.       <h1>菜鸟教程</h1>
   
5.       <p>学的不仅是技术，更是梦想！</p>
   
6.       <p>哈哈哈，打字辛苦啊！！！</p>
   
7.     </template>
   8 J' V& a: D; g, Q* o  z
8. </div>
   
9.    
   
10. <script>
    
11. new Vue({
    ( E1 {  f+ c0 E  q' b7 B
12.   el: '#app',
    2 ~3 }% A0 E0 m6 }4 g! d
13.   data: {
    
14.     seen: true,
    - y0 R0 }# j0 _) |: H7 Y, M- K
15.     ok: true
    
16.   }
    # a# M" A# b. F2 g9 q
17. })
    
18. </script>

复制代码

  H' ~) e) b& A

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

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

1. <!-- Handlebars 模板 -->
   
2. {{#if ok}}
   ' Z2 s' F& {" ?4 D. y0 Q; b
3.   <h1>Yes</h1>
   " R9 x4 v' ]; K( `3 K* T5 l# E
4. {{/if}}

复制代码

v-else

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

v-else 指令

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

1. <div id="app">
   ' ~$ H# j; u6 \9 R) _
2.     <div v-if="Math.random() > 0.5">
   : ?+ @, [+ M) Z- p! H7 C
3.       Sorry
   
4.     </div>
   
5.     <div v-else>
   
6.       Not sorry
   
7.     </div>
   " u- B8 r/ S8 z7 w
8. </div>
   . Q2 Y; H+ q5 f2 R& {
9.    
   * d! _" K  Q9 z6 P
10. <script>
    6 A  U4 Q8 k3 W. b5 S! R
11. new Vue({
    # s7 b. p- B, e2 k
12.   el: '#app'
    
13. })
    
14. </script>

复制代码

v-else-if

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

v-else 指令

判断 type 变量的值：

8 W6 W/ {! I$ B$ X% J. u

1. <div id="app">
   
2.     <div v-if="type === 'A'">
   
3.       A
   3 C2 k6 o# Y. Z2 Q8 y
4.     </div>
   2 x8 k5 W( r' U  Q+ b6 q) \! s, M0 i& O
5.     <div v-else-if="type === 'B'">
   # o. _) [3 P( e2 x
6.       B
   " P5 A3 x4 Z2 u1 y$ x$ l. b/ P7 f
7.     </div>
   / f. j# H7 x: J& l4 `3 j
8.     <div v-else-if="type === 'C'">
   , }8 H& w2 B; k" V, Q, S' {
9.       C
   
10.     </div>
    & w0 G  o+ w6 ]" s, n: A4 r
11.     <div v-else>
    
12.       Not A/B/C
    3 Y. U7 r" `# Z2 X' y. |. M
13.     </div>
    
14. </div>
    % }$ k) J% V1 K) r
15.    
    
16. <script>
    
17. new Vue({
    
18.   el: '#app',
    9 r# P1 f$ D  ^9 {2 |
19.   data: {
    ) P# m# U2 s& [. f1 J
20.     type: 'C'
    # _9 W7 Z$ c4 B0 H7 O& |0 Y
21.   }
    
22. })
    " f; n1 R+ u5 l" L  {
23. </script>

复制代码

& Z9 ^' v9 o- L+ c$ f

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

v-show

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

v-show 指令
3 S  m, H' D. F

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

复制代码

# z  r+ q: M7 V+ F% o5 r' M