您尚未登录,请登录后浏览更多内容! 登录 | 立即注册

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 13990|回复: 0
打印 上一主题 下一主题

[Vue.js] Vue.js 条件与循环

[复制链接]
跳转到指定楼层
楼主
发表于 2018-7-4 10:52:15 | 只看该作者 回帖奖励 |正序浏览 |阅读模式
条件判断v-if
条件判断使用 v-if 指令:
v-if 指令
在元素 和 template 中使用 v-if 指令:
  1. <div id="app">) p6 ~& H5 ]$ [. {4 ^
  2.     <p v-if="seen">现在你看到我了</p>
    - }8 @) l7 s: J+ X9 F% A
  3.     <template v-if="ok">
      A: q# }4 q8 w/ @: X+ H; y
  4.       <h1>菜鸟教程</h1>; q: k$ s6 {+ o+ ?" V6 C
  5.       <p>学的不仅是技术,更是梦想!</p>
    ' K8 g9 M- v2 i- H8 b3 {8 ]0 a. d
  6.       <p>哈哈哈,打字辛苦啊!!!</p>) _' K2 e7 M3 N) S" Y  q0 z
  7.     </template>9 j8 f" d; L" T! j
  8. </div>
    5 O/ C3 E* a1 N9 M: o) {2 q
  9.    
    3 W1 Y5 [# a; C5 u6 ^
  10. <script>
    : V1 z( n* R# n, P1 J
  11. new Vue({
    " s6 |/ k3 `9 w# `; M. N! [9 L, Y
  12.   el: '#app',
    2 D0 l3 s/ y. P
  13.   data: {& S1 g; M! _9 }- z0 @, t
  14.     seen: true,
    ) R1 w  X, ]9 Z9 b7 r5 H. {
  15.     ok: true
    ; |9 H- _7 V- A3 B0 y/ o+ V
  16.   }
    8 ^+ d1 x* }! a* }- `5 ~) {! b9 k$ V
  17. })
    7 j- T! T( ^: K# Q" a! a+ k1 x
  18. </script>
复制代码
( K% J$ B" q7 j2 ?% g& K% y7 O
这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
在字符串模板中,如 Handlebars ,我们得像这样写一个条件块:
  1. <!-- Handlebars 模板 -->
    ) F, k. ~& G3 T7 ~
  2. {{#if ok}}
    . ~. ^. Q: J, P3 u
  3.   <h1>Yes</h1>
    5 x! [, u1 j+ J( u8 z: a+ z
  4. {{/if}}
复制代码
v-else
可以用 v-else 指令给 v-if 添加一个 "else" 块:
v-else 指令
随机生成一个数字,判断是否大于0.5,然后输出对应信息:
4 Y* D- x; f" L1 d( \1 \2 r5 p  p
  1. <div id="app">9 ~$ {+ x% @: x  i
  2.     <div v-if="Math.random() > 0.5">+ E( C( C5 f. R. h
  3.       Sorry! \; x) K9 C) ^5 b  E2 f
  4.     </div>
    ; m% K6 N3 X; d$ H' X& N
  5.     <div v-else>
    % F: m3 D" k% M/ k
  6.       Not sorry
    : {" l" @! y$ u  |3 Y
  7.     </div>
    ( C6 y$ u7 Y5 P* S$ y
  8. </div>
    - g7 d1 M. L  i0 d- E+ A% z
  9.    
    ( A1 X! M* f- C$ r4 o1 U+ p) i7 y
  10. <script>4 H% x! ~4 R% D' Q, }/ J' A5 _
  11. new Vue({
    2 v8 c, q8 L) q4 S! u& f9 u
  12.   el: '#app'/ {/ J5 M5 E1 `. N* p/ n
  13. })
    7 X- L0 L( x! X; @
  14. </script>
复制代码
v-else-if
v-else-if 在 2.1.0 新增,顾名思义,用作 v-if 的 else-if 块。可以链式的多次使用:
v-else 指令
判断 type 变量的值:

5 ~& I5 b4 d0 O9 L
  1. <div id="app">
    2 A6 U) \2 e/ K2 i
  2.     <div v-if="type === 'A'">% `, H7 T) {" i  p; J& N
  3.       A* }. V( R5 F4 I) `. W, u3 k1 }
  4.     </div>
    , u; u" R. Z4 q/ E/ Z
  5.     <div v-else-if="type === 'B'">
    1 l" R5 S0 J: ]; d$ k7 o5 q" `: O
  6.       B
    ( G7 r6 A- k5 I# H" t
  7.     </div>- o5 j4 O: {. W$ E: B
  8.     <div v-else-if="type === 'C'">
    : j! S* }9 F2 p1 M/ x8 z% K$ P
  9.       C9 p+ C# r7 G, R# k. ?$ g
  10.     </div>/ c- O; @: E8 G1 b
  11.     <div v-else>
    ; J8 g' D3 z8 g( J' ^/ u8 J0 u
  12.       Not A/B/C( k2 d) @& E; ^7 D1 g1 K/ T
  13.     </div>
    ( r" g# @2 k( A
  14. </div>0 r7 ^# h  }" @9 x' [: P) {
  15.     - ]9 B+ _: r6 {6 k# ~
  16. <script>
    3 I! i+ Z% B) B1 v
  17. new Vue({
    0 _$ q  Y; G0 |$ c# F4 G
  18.   el: '#app',. V5 [- m2 N2 Y4 B0 q8 D4 q) F( i
  19.   data: {: s0 _0 C2 M2 [3 O, O" x& s
  20.     type: 'C'
    ) j3 L1 B+ e0 n1 V( v% C2 o  ~! ]
  21.   }
    9 H; I, x+ s9 ^+ \7 @; e* K
  22. })1 U- z+ f- W& \6 j
  23. </script>
复制代码

7 |# j# x$ a3 e8 d+ P4 G' n  X3 n! J
v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。
v-show
我们也可以使用 v-show 指令来根据条件展示元素:
v-show 指令
* Z8 f* S2 b  a5 Q" B% J9 z
  1. <h1 v-show="ok">Hello!</h1>
复制代码
, O/ h  B* V9 [; l

5 e7 j& \8 W& f+ m0 S" v9 H. ?% h( Y' i; N* [, T

  o. b  z, n2 Y, D9 ?! d
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-5-2 15:29 , Processed in 0.057597 second(s), 22 queries .

Copyright © 2001-2026 Powered by cncml! X3.2. Theme By cncml!