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

QQ登录

只需一步，快速开始

 找回密码
 立即注册

QQ登录

只需一步，快速开始

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

[Vue.js] 循环语句

[复制链接]
admin
跳转到指定楼层
楼主
发表于 2018-7-4 10:56:27 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
循环使用 v-for 指令。
v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
v-for 可以绑定数据到数组来渲染一个列表：
v-for 指令) a" |5 @( F. J
  1. <div id="app">
    " r. f* K) [, _3 m6 s4 B% n4 q! S
  2.   <ol>
    ( G8 M2 b7 ^9 {9 p
  3.     <li v-for="site in sites">
    . B9 J0 j+ V1 ]' |2 c
  4.       {{ site.name }}) ?3 _* L# z# o5 q0 S& N! p
  5.     </li>! Z/ E0 I$ L: D. x$ i: a5 I
  6.   </ol>8 y1 e8 D9 E( W; p9 Z8 r4 r
  7. </div>
    2 R  Y' d; j1 V' P  i/ p- j$ N: @3 o
  8. - r1 K5 L, c/ d' J3 V2 X% e
  9. <script>% ?2 u( D; O8 m
  10. new Vue({8 H' A; T8 v$ d) V' Z) `# `
  11.   el: '#app',
      }8 @* e0 k  @4 R5 v
  12.   data: {% G! [& v6 C9 t2 E: j, d
  13.     sites: [
    ! C2 f$ I  `+ ], R# M, a/ K  Q  d
  14.       { name: 'Runoob' },
    # M5 _+ A6 y& b- @5 |
  15.       { name: 'Google' },2 s6 \- S  w  B9 ~
  16.       { name: 'Taobao' }3 ]3 R! ?- l% i: ^% B+ e' q
  17.     ]; F! m2 {0 K) p2 N2 f6 c6 r6 C* L' b
  18.   }
    ! B. ?0 y6 Z0 J" x. m2 g
  19. })
    " Q) o/ p2 E$ A, r: F8 w
  20. </script>
复制代码

* }2 X* q! k4 `. B/ n
* N% t" ?  k; j) P' y
模板中使用 v-for：
v-for7 Z$ q9 a( K9 C+ @2 F. b* I+ S
  1. <ul>! G$ i$ p1 ^; t* `( O# K/ o
  2.   <template v-for="site in sites">$ O- c8 _) [! S5 l: z
  3.     <li>{{ site.name }}</li>. n6 T& E5 k! M) A- ^+ U7 q
  4.     <li>--------------</li>
    # J) ?+ z6 v) a+ Y
  5.   </template>
    , a9 a& `  J9 C
  6. </ul>
复制代码
v-for 迭代对象
v-for 可以通过一个对象的属性来迭代数据：
v-for8 O- W9 w" V: K" i$ u, X% M# g
  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;">& X% n7 X7 Z  ?6 k
  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;">$ P5 y9 S* e* r- n. }
  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 F* n# s/ d* |7 w9 M: O+ e
  4.     {{ value }}
    1 N2 f+ p. F. b, G
  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 H( |% Q2 X0 b/ [/ g7 _
  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;">; ?7 q: I0 }3 w1 ~4 Y3 D, I0 k
  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;">! g( W# N# ^  z9 }& s

  8. 3 _. V! j% e/ O4 c- P' `2 ^; P/ H
  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;">0 a" ]* U( @4 I" G
  10. new Vue({, P+ D0 V: B; {; n$ c% z6 J% }
  11.   el: '#app',' |+ L* ^; l' e/ _; `' {/ H, c
  12.   data: {
    , f' r$ u& R& w+ p% D
  13.     object: {
    - B1 B" B. I+ o" ^' r- z# |
  14.       name: '菜鸟教程',! {% u, I) p8 B, P6 t
  15.       url: 'http://www.runoob.com',7 ^, Y' x( Z& Z2 A  w3 ?
  16.       slogan: '学的不仅是技术，更是梦想！'" q  l0 e. O) V7 Z3 p  s; b
  17.     }
    4 t% |; a/ A5 l: r; U+ w. S
  18.   }( ~* ?# q% `# a( }
  19. })
    2 r3 d2 ]  o" Q# w3 f# R
  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
" b, s. A6 p; A- O# n- f$ d+ u1 p
  1. <div id="app">
    , {* H' u( L/ I& N. s
  2.   <ul>" J7 d% y2 Z+ @$ `1 ?3 ]5 L, s2 W/ f
  3.     <li v-for="(value, key) in object">; S1 d7 k' _4 T( O4 P. C) q& [
  4.     {{ key }} : {{ value }}
    4 r; d2 a' f  C3 s) E4 t. m
  5.     </li>6 |# h2 g* \. ]+ E' h& a: ~, u2 p
  6.   </ul>
    : a& j3 V, Q. p/ _3 @; C5 t
  7. </div>
复制代码
第三个参数为索引：
v-for
( O) Z) M( k1 X4 B/ ~' e; K% @( d# M" r) P) W6 g+ O
  1. <div id="app">" j9 Y6 T; |+ _
  2.   <ul>" |2 |2 J/ A  }$ }. t; T  {! o0 A
  3.     <li v-for="(value, key, index) in object">
    4 g9 J$ Q! O: I7 p* S7 w
  4.      {{ index }}. {{ key }} : {{ value }}
    1 T& N& @$ ?4 b/ v
  5.     </li>9 R4 i5 [* L. {* `$ W+ u
  6.   </ul>
    4 R- i0 h& c6 G3 A0 q8 Z/ s  `
  7. </div>
复制代码
v-for 迭代整数
v-for 也可以循环整数
v-for% M$ N+ ?: Y- N$ n2 n
0 ]1 |' ?1 W% \! h/ _
  1. <div id="app">
    1 H% f7 g* I/ p! T( p
  2.   <ul>: N& F9 G) Q" [1 n3 p% G* a# T8 g
  3.     <li v-for="n in 10">
    2 M( [, [1 p& ]( {* O8 {
  4.      {{ n }}
    3 A+ O0 U9 q0 e! i* T
  5.     </li>
    : i2 Z6 v3 w: h! |7 s. P
  6.   </ul>6 w9 a$ S/ m; f, P4 A* o8 H1 k; C
  7. </div>
复制代码
& b' w" P3 r# X: S6 R) r

# u- K. p( Z7 O+ W3 M) H" l6 E1 h% `/ @4 Q
: _7 q4 G. f: j' U$ V& U8 i
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
回复

使用道具 举报

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

本版积分规则

GMT+8, 2026-5-2 13:32 , Processed in 0.085626 second(s), 21 queries .

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