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

QQ登录

只需一步，快速开始

 找回密码
 立即注册

QQ登录

只需一步，快速开始

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

[Vue.js] 循环语句

[复制链接]
admin
跳转到指定楼层
楼主
发表于 2018-7-4 10:56:27 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
循环使用 v-for 指令。
v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
v-for 可以绑定数据到数组来渲染一个列表：
v-for 指令
! U9 A2 `# O* g7 ]7 e+ g1 h+ z( m5 O! g
  1. <div id="app">
    6 p- D: M2 K+ E+ _' f7 r! C
  2.   <ol>  @5 w9 O* W6 @$ b2 f
  3.     <li v-for="site in sites">" D2 a% T% j7 @: y3 R' p
  4.       {{ site.name }}4 C& Z0 u" j4 U9 N5 l; c" s' M: `  V
  5.     </li>
    % m6 Q- e1 g- z6 h/ B% I; E2 ~2 O
  6.   </ol>* Z7 i6 A" f0 B' J# v: G4 {0 U- w4 q
  7. </div>- ?. o" P2 Y; T! R3 F

  8. . l7 i/ F& O. R7 }% P% G- t
  9. <script>
    * t! y+ V3 ^" H# r8 ~* D' ^; z
  10. new Vue({
    0 k0 a) y0 x: }
  11.   el: '#app',
    5 q4 G0 ]& q8 j9 A: S0 `
  12.   data: {* j. s: G8 J: d1 N, j+ }7 P  Z" I
  13.     sites: [
    . |3 t/ W) T1 G4 J$ E- z7 E) l4 g
  14.       { name: 'Runoob' },* ~! d2 M# n  s4 D8 n/ e
  15.       { name: 'Google' },. O3 ?9 k7 e  r3 A3 ?
  16.       { name: 'Taobao' }; O4 G, b( n  Q4 U! M
  17.     ]8 W: Q" x) A+ n
  18.   }" i; A5 u; U  T) \1 j; L0 P( P
  19. })' h, ?+ U& x: o! j0 }3 s, z
  20. </script>
复制代码

* `! W3 Q: ^4 }5 y: o6 k0 p5 c5 o3 P6 D' D9 E9 h2 F  q
模板中使用 v-for：
v-for; E- H- @$ B! }+ V2 S6 {
  1. <ul>& K5 m% m7 O2 z! x1 }6 F  ?
  2.   <template v-for="site in sites">
    8 ^! Y! C6 K' ^9 T' A
  3.     <li>{{ site.name }}</li>
    . `4 @) d% J1 e) y$ l8 M
  4.     <li>--------------</li>( H$ C$ T' q2 G3 S( ^
  5.   </template>, c$ s, N8 c: Y3 Q
  6. </ul>
复制代码
v-for 迭代对象
v-for 可以通过一个对象的属性来迭代数据：
v-for1 X# q1 ]+ `/ F& A9 Z8 o" f
  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;">
    9 D, @0 G2 X2 s/ I3 N
  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;">
    / U" C# _9 Z  Z+ H2 w# E2 W  K
  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;">5 w8 V7 p# F5 q1 \: I: N( r
  4.     {{ value }}
    5 c8 K$ X' F# n/ [& X
  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;">6 |; C( ^* k7 u
  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;">% N' X  v4 @# V5 L! w" O1 g1 K- H
  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;">! X0 P4 `/ Y; G7 ^4 f; j. y: S) o

  8. " B; H0 [) G; Q8 a" y' r2 I7 s+ D* R
  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;">
    1 v6 f5 ^  \& O' h4 m) c' o
  10. new Vue({
    1 t% B* m7 R3 R" c; w6 c
  11.   el: '#app',
    ; J1 c3 t6 l' {
  12.   data: {
    ) d7 |! A3 ~9 D# N
  13.     object: {
    # o! n0 `$ h% X
  14.       name: '菜鸟教程',$ b$ l  k! j/ N- o
  15.       url: 'http://www.runoob.com',
      u$ U3 E( d: v/ H1 `
  16.       slogan: '学的不仅是技术，更是梦想！'% y7 ~3 Q* B# P8 a0 E- u2 n
  17.     }
      x2 }. d9 T9 h8 W6 k" F
  18.   }
    0 w; z+ a2 Q) I- _
  19. })5 _! c* G$ d2 z% H6 h# b8 p; {
  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
0 A9 t, \8 s* M1 j$ t: E; b, ]. B/ ?3 W8 W. Q) I3 `$ N
  1. <div id="app">
      m, }; Z, [) q2 C
  2.   <ul>
    2 i8 O* R+ ~* I+ D1 V' V* |0 p" Z6 q
  3.     <li v-for="(value, key) in object">
    * a  R: L/ n* A3 G" }" C
  4.     {{ key }} : {{ value }}; B4 m% h8 L) a9 |6 A5 E! H
  5.     </li>8 }, m: Y  p1 L! E
  6.   </ul>
    ' }/ z; s! ^& H2 _
  7. </div>
复制代码
第三个参数为索引：
v-for6 ^$ l5 r$ K5 s4 G% x. o5 B
/ F8 @, d* V# e5 L7 c
  1. <div id="app">5 ~7 L- a! O% e! }5 s. Q+ `
  2.   <ul>
    1 z5 U4 J( B$ U8 d+ g/ H
  3.     <li v-for="(value, key, index) in object">
    5 v" d2 G, s) I* G/ J3 A
  4.      {{ index }}. {{ key }} : {{ value }}' C" H6 n; s' l  W* _
  5.     </li>
    + `1 S& d0 z  Q3 C: J' `
  6.   </ul>4 F& {0 ?7 z" {' O% P: O
  7. </div>
复制代码
v-for 迭代整数
v-for 也可以循环整数
v-for! k! D- w5 z( ^3 Q

/ x+ n! F7 m8 M  v1 E7 ^: n
  1. <div id="app">) I$ P5 m3 e0 U; ]
  2.   <ul>- H6 R) j9 V- [4 C! X3 w
  3.     <li v-for="n in 10">
    , Y% ]% L1 Z; ^8 |4 U" V
  4.      {{ n }}
    - f0 `/ t: n: H% f. u/ B2 N% m1 {6 j
  5.     </li>
    ' ]8 T4 k/ {5 n) U
  6.   </ul>
    3 I/ B5 f( B, P# v1 k7 e+ k1 l
  7. </div>
复制代码
+ i2 @* k3 c& V, `9 \2 Z, X5 w
, K5 u, ~# V/ v
# _6 S2 c1 ?* |; V  Y" W

. q3 V1 c/ u) L4 e
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
回复

使用道具 举报

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

本版积分规则

GMT+8, 2026-5-2 14:33 , Processed in 0.072690 second(s), 20 queries .

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