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

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

[Vue.js] 循环语句

[复制链接]
跳转到指定楼层
楼主
发表于 2018-7-4 10:56:27 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
循环使用 v-for 指令。
v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 site 是数组元素迭代的别名。
v-for 可以绑定数据到数组来渲染一个列表:
v-for 指令3 w3 B* n3 Z' E8 ?+ ~
  1. <div id="app">" u7 c" G& b0 Z* ]* S; x
  2.   <ol>
    ; z  E3 U. y3 a' B5 A$ @3 _& K- r
  3.     <li v-for="site in sites">* C; x6 H0 Y: u" G
  4.       {{ site.name }}
    ; Y* M) N, X! e: f' V) M1 f, }
  5.     </li>
    6 g8 ~6 G6 K: h2 ]% ]
  6.   </ol>
    + m# ^+ b/ [; w. F! o
  7. </div>8 }8 a7 w: c8 _1 r) u) f: M
  8. , a( t( ]& x. z) A( x3 F/ m& b
  9. <script>
    . n$ S( Y+ K% ~1 k6 Z
  10. new Vue({
    1 ^4 K2 o" j/ [8 J
  11.   el: '#app',1 i3 S9 T' |  z( I6 k* e" t
  12.   data: {
    / {4 d6 `) z4 K4 i9 b; N
  13.     sites: [
    ; c, ^9 V7 G; o1 B
  14.       { name: 'Runoob' },
    3 c1 l7 J6 w, j% Q
  15.       { name: 'Google' },
    & L6 K5 q  O6 g5 f1 y  O3 ]  [
  16.       { name: 'Taobao' }
    : `5 s6 C* g; o) Y' e. a9 n% l% M; h
  17.     ]( y2 f( o5 M, j0 G/ C- O  B- S
  18.   }
    7 V0 F$ R& ]* I
  19. })
    / K# \! u: H( ?: p2 X8 {& e
  20. </script>
复制代码

6 f4 z* `  o/ w0 R( P4 _% E/ U  y$ |4 L
模板中使用 v-for:
v-for) q/ w* K4 }. D4 f2 u; o
  1. <ul>. D! }# F* O9 F+ u3 m% {& ?
  2.   <template v-for="site in sites">
    / J- q, ?4 b; |: Y% ?
  3.     <li>{{ site.name }}</li>
    ! _7 }, q# h0 o1 \8 l
  4.     <li>--------------</li>  O7 X( W, N% j9 E
  5.   </template>
    2 m" Y* a0 `2 L) l1 `& {
  6. </ul>
复制代码
v-for 迭代对象
v-for 可以通过一个对象的属性来迭代数据:
v-for& E8 k# n( F2 L* {
  1. <div><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;"><</span><span class="hl-reserved" style="border: 0px; color: green; font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;">div</span><span class="hl-code" style="border: 0px; color: gray; font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;"> </span><span class="hl-var" style="border: 0px; color: rgb(0, 0, 139); font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;">id</span><span class="hl-code" style="border: 0px; color: gray; font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;">=</span><span class="hl-quotes" style="border: 0px; color: rgb(139, 0, 0); font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;">"</span><span class="hl-string" style="border: 0px; color: rgb(170, 17, 17); font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;">app</span><span class="hl-quotes" style="border: 0px; color: rgb(139, 0, 0); font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;">"</span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;">></span><span class="hl-code" style="border: 0px; color: gray; font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;">
    1 _& K, {$ {: ?7 @- Y
  2.   </span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;"><</span><span class="hl-reserved" style="border: 0px; color: green; font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;">ul</span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;">></span><span class="hl-code" style="border: 0px; color: gray; font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;">- l! ~$ O# h/ O/ F+ G' h0 Z
  3.     </span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;"><</span><span class="hl-reserved" style="border: 0px; color: green; font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;">li</span><span class="hl-code" style="border: 0px; color: gray; font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;"> </span><span class="hl-var" style="border: 0px; color: rgb(0, 0, 139); font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;">v-for</span><span class="hl-code" style="border: 0px; color: gray; font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;">=</span><span class="hl-quotes" style="border: 0px; color: rgb(139, 0, 0); font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;">"</span><span class="hl-string" style="border: 0px; color: rgb(170, 17, 17); font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;">value in object</span><span class="hl-quotes" style="border: 0px; color: rgb(139, 0, 0); font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;">"</span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;">></span><span class="hl-code" style="border: 0px; color: gray; font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;">0 C3 [/ }5 M$ v. k# V. t
  4.     {{ value }}
    9 q% ?( M- `2 l6 A9 S
  5.     </span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;"></</span><span class="hl-reserved" style="border: 0px; color: green; font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;">li</span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;">></span><span class="hl-code" style="border: 0px; color: gray; font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;">
    : ]1 B! \* H" I. K3 i) P
  6.   </span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;"></</span><span class="hl-reserved" style="border: 0px; color: green; font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;">ul</span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;">></span><span class="hl-code" style="border: 0px; color: gray; font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;">% G+ I: t. t$ L
  7. </span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;"></</span><span class="hl-reserved" style="border: 0px; color: green; font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;">div</span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;">></span><span class="hl-code" style="border: 0px; color: gray; font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;">  b; }3 @5 H% Q6 x
  8. 5 V" m  y& {# r7 C. K! c) q
  9. </span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;"><</span><span class="hl-reserved" style="border: 0px; color: green; font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;">script</span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;">></span><span class="hl-code" style="border: 0px; color: gray; font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;">6 H" `4 t: Y8 `9 `  ^* W& l
  10. new Vue({2 Y- f- l: z* W9 c
  11.   el: '#app',
    6 K, V/ c1 U' y% {
  12.   data: {
    + G& J7 V6 r8 I$ ~+ b5 G# q! Y6 n
  13.     object: {
    - ]; G& v6 J5 ?2 ^" e: C; D# i: y
  14.       name: '菜鸟教程',
    8 M4 K2 I5 C( ^+ a& {; O) m
  15.       url: 'http://www.runoob.com',
    / M& W4 l" Z9 C  V/ l8 Q8 v$ \
  16.       slogan: '学的不仅是技术,更是梦想!'0 k. r& {* q+ Z% E0 r3 z
  17.     }: e- V& v' K  H+ s! B! V$ g
  18.   }) R& u) i7 B- v( D
  19. })
    - m; Z% Q! s! I2 v
  20. </span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;"></</span><span class="hl-reserved" style="border: 0px; color: green; font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;">script</span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;">></span></div><div></div>
复制代码
你也可以提供第二个的参数为键名:
v-for! }, J' I2 m/ B& i
8 W) G' X4 \  q" `! ~. I( w
  1. <div id="app">
    7 B3 E4 |0 u4 P" z
  2.   <ul>
    ' L; K1 y2 n! M3 g7 ?& J
  3.     <li v-for="(value, key) in object">" A2 p; ~3 m9 P
  4.     {{ key }} : {{ value }}
    # ^3 j! S, u1 l! S' ]* b; d
  5.     </li>+ A6 w" C9 ~* ]& g5 ~# j. [
  6.   </ul>
    . G: G  Q- |) @; S& u
  7. </div>
复制代码
第三个参数为索引:
v-for" p* U( T1 C1 H  @5 X

8 a& G2 K, D" c! y
  1. <div id="app">
    / r/ x/ t2 p* n' m: G+ A6 M
  2.   <ul>5 b& A- d" R0 n: t
  3.     <li v-for="(value, key, index) in object">3 Q" O9 J! q, B' p+ [
  4.      {{ index }}. {{ key }} : {{ value }}
    3 ]* z9 w4 A1 @; e$ t- l
  5.     </li>6 Y; Q& P7 n& m# ]. k
  6.   </ul>
    3 Q7 l' n1 b7 t6 y$ L0 q' k/ C2 i4 r
  7. </div>
复制代码
v-for 迭代整数
v-for 也可以循环整数
v-for. ^  c( Y& }( q) ~
5 o2 k; v; ?7 `/ O: S! m1 w/ _! k6 A
  1. <div id="app">  U/ H/ V, K: d: c3 v
  2.   <ul>" T5 q% V6 V# _$ G& k" [  M
  3.     <li v-for="n in 10">" D3 |* x& ]% [% u
  4.      {{ n }}6 v0 G$ `3 D# R2 N5 i
  5.     </li>1 E, _. z* Q' U% W: Z* u2 f3 ]7 ~2 F
  6.   </ul>) ?4 T  m. ~: g  |" D- O: N+ c
  7. </div>
复制代码
1 N& R% V$ e) I7 j1 t1 v1 p
# Y' G- Z" w# R' s. w. V) R1 w8 g
4 |* O; l* [( ], d( t

& w3 {/ k% w* B" s# |  ]7 f$ R0 {
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-8-4 10:48 , Processed in 0.062992 second(s), 19 queries .

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