cncml手绘网

标题: Vue.js 条件与循环 [打印本页]
作者: admin    时间: 2018-7-4 10:52
标题: Vue.js 条件与循环
条件判断v-if
条件判断使用 v-if 指令：
v-if 指令
在元素 和 template 中使用 v-if 指令：
  1. <div id="app">0 m3 [6 b: l* W
  2.     <p v-if="seen">现在你看到我了</p>
    6 d- q* d- }% m3 S
  3.     <template v-if="ok">6 @$ Z" O2 e: @( W" P
  4.       <h1>菜鸟教程</h1>
    0 n) v+ j8 {& ~- _/ X) s
  5.       <p>学的不仅是技术，更是梦想！</p>: q) G& f' c1 `
  6.       <p>哈哈哈，打字辛苦啊！！！</p>
    . ~$ [( x7 m/ O" V/ N0 Q7 d
  7.     </template>
    9 Y% a4 c, Z' I7 ]4 ]$ Z6 |8 X/ t
  8. </div># J9 g0 ?" x+ s# i$ o0 H: h. C
  9.     / ], i( `4 F: P: y
  10. <script>
    0 o2 ?$ V$ f% L5 F
  11. new Vue({' [) D. e3 i* g: f) J
  12.   el: '#app',8 ~" u) {+ l7 d
  13.   data: {+ a! U. c1 k' B, l, D6 i  I* M$ D
  14.     seen: true,& w1 S: s4 C; ]# e
  15.     ok: true
    6 t3 i  e) {1 U3 s" J) Q
  16.   }
    , w6 @4 q5 ~: X: M# X1 ~  i
  17. })9 u" M0 T6 s; ]7 H2 h1 S
  18. </script>
复制代码
: C# v7 s9 X1 P, f3 ?
这里， v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
在字符串模板中，如 Handlebars ，我们得像这样写一个条件块：
  1. <!-- Handlebars 模板 -->
    : K+ ^. n6 N+ C4 R( k* d6 g
  2. {{#if ok}}
    . m( P& [" x# B0 Z' r
  3.   <h1>Yes</h1>
    7 x- l; ?! U/ ~
  4. {{/if}}
复制代码
v-else
可以用 v-else 指令给 v-if 添加一个 "else" 块：
v-else 指令
随机生成一个数字，判断是否大于0.5，然后输出对应信息：

' D% v: |( C# q+ Q: ~- `8 M( ]3 y7 a
  1. <div id="app">, F/ Y# a4 V8 w
  2.     <div v-if="Math.random() > 0.5">2 O+ W( T* E( O6 {9 Y- L! X
  3.       Sorry2 C7 k. q: ~. y( R, ^
  4.     </div>
    : X' ^! Y. N& w# q3 ]$ I
  5.     <div v-else>
    5 y4 Y. O& i& ^. t0 `
  6.       Not sorry
    2 h8 O2 o7 k+ ^  u3 G' {4 a; H
  7.     </div>
    1 r+ h, r" a4 E! y) I
  8. </div>
    ' g0 c* o' _% i* v! D" M" @" q
  9.     & S* a- I& R; m3 D  l& V& p, ?( a
  10. <script>+ w$ G! j" m7 p# k! `  q) z% A! ]) O
  11. new Vue({
    6 l$ i. e, C/ ^/ j6 R
  12.   el: '#app'- v# D8 G" x1 K9 n/ f2 J
  13. })
    / u9 t- ^0 n! f# K3 `5 @6 C5 Y9 P
  14. </script>
复制代码
v-else-if
v-else-if 在 2.1.0 新增，顾名思义，用作 v-if 的 else-if 块。可以链式的多次使用：
v-else 指令
判断 type 变量的值：

6 P& w! w; \4 k  S
  1. <div id="app">1 d8 G9 Y' z& j6 J
  2.     <div v-if="type === 'A'">/ q* f$ V6 ?; F
  3.       A
    8 H* r* w$ ?$ P/ @, D; K( w8 Y& Y+ v/ C
  4.     </div>+ X3 M5 l' e# x! A  K) v. v% a# @
  5.     <div v-else-if="type === 'B'">. ^* @- `6 K% p& [
  6.       B- T5 s3 W7 i# E8 f  J
  7.     </div>
    4 p/ f0 e2 _! b9 U& [
  8.     <div v-else-if="type === 'C'">
    5 n9 L& b" T- \& J3 F7 L
  9.       C
    # o* @% d  E6 J6 K- ^4 V0 e
  10.     </div>' U' _# W  l4 n1 l; G# {
  11.     <div v-else># m3 R5 Q3 I" l1 B# `$ f
  12.       Not A/B/C
    & b6 H; k' W2 C" |
  13.     </div>
    4 F$ O$ d6 E" g8 G
  14. </div>
    + j: T. i; w- h' G
  15.     + l9 y+ l! r( h( ?! C
  16. <script>
      S0 R: F8 @2 G% Y  \
  17. new Vue({$ h/ C9 |" p- t% [3 ?3 N/ F
  18.   el: '#app',
    ' n, F0 F8 o% c5 U
  19.   data: {
    # r4 a  q7 D; ~- b
  20.     type: 'C'
    # o8 b6 a; U: l# b5 B4 x" _
  21.   }
    . _( O) K' O& ?
  22. })0 r3 |, g+ b9 I
  23. </script>
复制代码

) m$ ?* v& v1 U! O* U/ ]* l
v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。
v-show
我们也可以使用 v-show 指令来根据条件展示元素：
v-show 指令) u5 |) b# m- S$ Y* G; Y! L% J
  1. <h1 v-show="ok">Hello!</h1>
复制代码
: Y( S; ~! a: {; w+ z  L% g6 w
  R: V% [9 K, S6 w4 G- I9 I! {
1 |, Y8 n9 z* f. c
0 v' z7 Z: F- y) u, J




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