cncml手绘网

标题: Vue.js 条件与循环 [打印本页]
作者: admin    时间: 2018-7-4 10:52
标题: Vue.js 条件与循环
条件判断v-if
条件判断使用 v-if 指令：
v-if 指令
在元素 和 template 中使用 v-if 指令：
  1. <div id="app">/ ?/ d: f/ F/ ^
  2.     <p v-if="seen">现在你看到我了</p>* Z; E8 ]; q6 m3 x- {5 M- Q! e
  3.     <template v-if="ok">& r' |0 a& E& ?( S# o% Z
  4.       <h1>菜鸟教程</h1>3 O9 `* p" K" W6 s$ ~: B. l
  5.       <p>学的不仅是技术，更是梦想！</p>4 r. {, [& ^! \8 b$ p# C
  6.       <p>哈哈哈，打字辛苦啊！！！</p>
    ) h$ S1 ?* O: r7 D; \4 W3 u4 {
  7.     </template>
    ' O! Y0 V. t0 U; J+ f! D
  8. </div>
    ( A- H; v% h4 {6 `; ?. N
  9.     6 O, G4 ]( z) M3 u
  10. <script>
    + ~* W& r2 c6 u" [- a$ A& g0 _5 h
  11. new Vue({; S. ^$ M0 l! w
  12.   el: '#app',1 u. }6 M+ e. o8 x( C3 y7 A$ d
  13.   data: {
      U4 N9 ]7 Q( n6 k4 G
  14.     seen: true,+ D) d! j5 M& H. L( L
  15.     ok: true
    % y- s" Y# e, h$ |! {6 u& O
  16.   }$ }  B. c5 v% ~; \- z. I+ y& a1 z
  17. })2 W& p0 p" _% ]1 w& A
  18. </script>
复制代码

1 T6 r& h, X( W! o/ M* g
这里， v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
在字符串模板中，如 Handlebars ，我们得像这样写一个条件块：
  1. <!-- Handlebars 模板 -->- [2 Z' d; `! i5 `
  2. {{#if ok}}
    1 _7 _( ~# s5 h/ M0 \1 ]
  3.   <h1>Yes</h1>% t9 ?8 j" m( Z! R4 d) g) W
  4. {{/if}}
复制代码
v-else
可以用 v-else 指令给 v-if 添加一个 "else" 块：
v-else 指令
随机生成一个数字，判断是否大于0.5，然后输出对应信息：

* N% \3 H" {- ^- E( V0 ]  B
  1. <div id="app">9 _3 v' n- F! X& s3 h
  2.     <div v-if="Math.random() > 0.5">
    ' m& z, i- w" Y3 @/ i/ B
  3.       Sorry8 B  y7 q5 |+ P/ n: K8 C
  4.     </div>* ~: }: m& R$ p) v. H! U) C
  5.     <div v-else>$ J/ O! Y' X2 H
  6.       Not sorry6 g" |2 ^1 _6 o8 L+ n
  7.     </div>* k1 w+ D% G& o1 r
  8. </div>
    5 T7 J8 T' B: z; H- x9 g
  9.    
    2 Z& L, O- v6 a( L7 Z7 M
  10. <script>6 R/ Q" X3 Q- a* n# X% D. D2 B
  11. new Vue({/ |8 v8 k# R3 s) Y8 \* \; `2 s6 ]
  12.   el: '#app'/ y& X1 J: v2 {6 M8 l! K+ C5 {( A
  13. })
    3 m- ]9 ]' R* F$ q" F
  14. </script>
复制代码
v-else-if
v-else-if 在 2.1.0 新增，顾名思义，用作 v-if 的 else-if 块。可以链式的多次使用：
v-else 指令
判断 type 变量的值：
3 g  B, b+ T  @* P0 m
  1. <div id="app">$ I1 o4 V, q3 U+ \( ~. h
  2.     <div v-if="type === 'A'">
    2 D, L2 D  \2 S0 f" L! ?5 D
  3.       A4 A( V& N. F! E2 A0 R, }
  4.     </div>
    1 c6 Z3 I/ c% i; ~8 ?+ k0 |
  5.     <div v-else-if="type === 'B'">
    9 j" B0 D1 T' Y& k, P
  6.       B
    ' m" n3 `; X2 g
  7.     </div>$ X/ Y0 s5 X* H) f. M
  8.     <div v-else-if="type === 'C'">
    3 \- L. [: j( q4 G; x
  9.       C( e0 j, G9 I8 H  w2 t
  10.     </div>
    : g7 F* X6 t( m. u
  11.     <div v-else>
    ) A) S. Z2 ?. w( c! ]) B
  12.       Not A/B/C5 C9 \1 C. |" W5 O
  13.     </div>- e* k  a; x- q0 ]. O6 u* z& m
  14. </div>
    ' A6 R" z% @. A& {. M
  15.    
    ' j& T( n6 d6 m" k7 n) R( A$ Q4 R
  16. <script>  e7 C& F5 i6 |% J8 g$ Q
  17. new Vue({$ r% s4 W  v1 v8 B3 R( X; R
  18.   el: '#app',
    8 H/ y" `9 V7 Y' ^! Y& q2 \! ^
  19.   data: {
    1 a, _! t0 y5 a4 o8 q
  20.     type: 'C'
    ' I+ P( V) k2 ~+ k; W4 s
  21.   }5 D  e! C/ ]" Q1 O9 U" f
  22. })9 Z6 u( m" b2 Z4 E
  23. </script>
复制代码
  d* f& N' [$ ~3 s, S! {
v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。
v-show
我们也可以使用 v-show 指令来根据条件展示元素：
v-show 指令
- f- A- t3 I! R* P" P, f; p
  1. <h1 v-show="ok">Hello!</h1>
复制代码

1 Y' K- n+ G& G. Y/ j; c% o- `. w

, ?* Z$ m4 m2 t# ]( m/ x7 Q( b8 e
/ z/ ~+ n5 @' O" y



欢迎光临 cncml手绘网 (http://bbs.cncml.com/) Powered by Discuz! X3.2