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

QQ登录

只需一步，快速开始

 找回密码
 立即注册

QQ登录

只需一步，快速开始

返回列表 发新帖
查看: 10781|回复: 0
打印 上一主题 下一主题

[Vue.js] 循环语句

[复制链接]
admin
跳转到指定楼层
楼主
发表于 2018-7-4 10:56:27 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
循环使用 v-for 指令。
v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
v-for 可以绑定数据到数组来渲染一个列表：
v-for 指令
/ A/ }! M- v  j6 t
  1. <div id="app">
    * {6 N5 J) s2 o! ^1 S8 w& _8 s
  2.   <ol>
    2 ?1 f* N+ N2 n9 G
  3.     <li v-for="site in sites">8 p% v$ U8 T. Z! q2 f
  4.       {{ site.name }}! s! }' h' Q$ C5 h) y  x
  5.     </li>' {8 Q) x7 L/ H/ D, `
  6.   </ol>
    : P0 H+ j+ y) ]; x9 y; D3 u' X  e
  7. </div>
    " S0 T/ X( V' G, V; t

  8. 7 K7 u5 q5 f, h' E6 W/ l
  9. <script>
    + _. h7 x1 _: A- ~" ?7 ^7 t1 M
  10. new Vue({# j# ^/ w( r# R0 @; _, }; C
  11.   el: '#app',
    . p4 Q; E7 z$ q1 x1 B
  12.   data: {+ R8 A5 Z7 B' h3 p
  13.     sites: [% d. o3 X  l' r: s( `
  14.       { name: 'Runoob' },
    : ^7 D) x  b6 [" Q1 a, u- ]" [
  15.       { name: 'Google' },1 |: K9 j- H) e! @9 f* z" ^& [
  16.       { name: 'Taobao' }
    0 h/ {0 p% Z& Q9 e6 D" ^
  17.     ]+ h* i' p' w/ [
  18.   }! L4 U6 l8 o& r! |: O( |
  19. })
    , I5 P1 G5 i7 e0 @& ~4 |
  20. </script>
复制代码

1 |  H/ a6 `+ m! O  f7 ^% x. B
模板中使用 v-for：
v-for' Y* Z& ?; Q# n/ |% X( G
  1. <ul>6 @" d7 z0 j3 _9 H$ E
  2.   <template v-for="site in sites">  [* k% Y4 P8 ~! J- \+ t2 s: O9 q& X
  3.     <li>{{ site.name }}</li>
    : i+ A" Y, o  V* Z7 ?- b) e( t
  4.     <li>--------------</li>
    " `/ z; g1 H5 p
  5.   </template>& ~; H. L" L$ g: s8 M
  6. </ul>
复制代码
v-for 迭代对象
v-for 可以通过一个对象的属性来迭代数据：
v-for
  s2 C* s* A& n6 o; Y6 o2 e
  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;">* r% `+ V; @+ ~) t
  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;">$ J) _5 B' O  \7 Y6 @2 Q0 \
  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;">. w  A. S  D; V. z2 _0 J6 U! I
  4.     {{ value }}
    ) s* v; f+ p& G7 e. M# ~- i  m4 F
  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;">! B7 ~7 P, h/ l
  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;">
    8 w4 G% ]# c: n+ _% N
  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;">
    $ P. C6 x1 ?& R$ p% o/ k
  8. , w1 e9 z* ]/ k9 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;">4 [$ R7 M. o# a) E. Q
  10. new Vue({1 b2 E0 |  p- K! f* D5 t6 A; ~
  11.   el: '#app',
      i" `3 _1 z& y1 v' \9 |% L
  12.   data: {
    0 J- u4 Y5 f2 ?+ o& Z1 B
  13.     object: {* f1 t* C  q0 U, B# Y1 J
  14.       name: '菜鸟教程',& I' a9 \- a) c
  15.       url: 'http://www.runoob.com',
    9 h& @3 D3 \: x# k# J+ @* p! w
  16.       slogan: '学的不仅是技术，更是梦想！'
    5 v0 W# i% b; o6 j* w
  17.     }
    ( T: m8 e1 n& b- P+ w& A
  18.   }' N8 z# Z7 }! G4 }, H9 I
  19. })  v4 q1 U) X; t! }& c. Y8 A
  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
+ B6 X, y+ t& C' Q3 l) Q# h0 Q4 G- s2 w- y3 B
  1. <div id="app">( h5 ?- F) D( ?# f( p: z( [# I
  2.   <ul>1 v* h5 a1 i$ D: v! J* o( Z( E
  3.     <li v-for="(value, key) in object">
    1 ^( p, \% I  ~4 t
  4.     {{ key }} : {{ value }}
    - \& D  ]3 s3 d2 ~) c; ]9 j
  5.     </li>
    5 a- W' y1 w3 I. Q1 R: x  c
  6.   </ul>
    2 Q; v* A( ~1 J1 j: R
  7. </div>
复制代码
第三个参数为索引：
v-for1 Z* [! Y4 \" e  t7 l: v: m* n4 }
6 |0 Q' H# j/ a% \
  1. <div id="app">
    ! _# p$ d, b% ?) z: ~0 D& G
  2.   <ul>
    0 [& Z; u% b6 M$ d  @1 c
  3.     <li v-for="(value, key, index) in object">
    " F7 q0 ?% J) J  I) B. r' Y
  4.      {{ index }}. {{ key }} : {{ value }}
    7 F3 \" Y. Y4 F3 ]
  5.     </li>& x6 b- u* s5 e# t3 {$ v5 L
  6.   </ul>( X  E4 H9 _6 d8 Q9 \6 K
  7. </div>
复制代码
v-for 迭代整数
v-for 也可以循环整数
v-for
3 l( }! A4 w, [4 d* v, _9 D$ d/ ]+ H2 M3 [3 P+ W7 |7 S1 J
  1. <div id="app">/ ?9 R# G# R5 }, z) @* R, d
  2.   <ul>
    , x8 D$ y0 q6 q' N
  3.     <li v-for="n in 10">7 K) f, S- a: ~4 U. K$ s
  4.      {{ n }}$ H$ y5 b7 F: |1 ?" r3 T! A
  5.     </li>0 W" E6 U7 }: A: m9 Y
  6.   </ul># I* ]/ n$ i; \! F$ S0 s; J1 q
  7. </div>
复制代码
9 L# a- |4 a3 S3 c

4 _* a# u, N  S; S! w: ]* s# I  M0 P7 v" G4 F$ N8 B% `2 v- x, e0 |
: T. I7 x) p. B9 {
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

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