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

QQ登录

只需一步，快速开始

 找回密码
 立即注册

QQ登录

只需一步，快速开始

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

[Vue.js] 循环语句

[复制链接]
admin
跳转到指定楼层
楼主
发表于 2018-7-4 10:56:27 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
循环使用 v-for 指令。
v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
v-for 可以绑定数据到数组来渲染一个列表：
v-for 指令" G. E; C% l  y! U! G  M
  1. <div id="app">
    6 Z1 l: H- @1 [1 k' H
  2.   <ol>& Z  |9 ^. h$ ?# @+ r3 l
  3.     <li v-for="site in sites">
    6 G: J0 c- E; a: b7 O
  4.       {{ site.name }}5 m4 l6 }3 g' y( Y6 N* N# c' S( Y+ `
  5.     </li>  v$ [7 U: S, V
  6.   </ol>
    ' b: B! J& r1 W
  7. </div>( A8 W2 f0 w" r4 E
  8. * G3 p7 ~% O7 q& I0 q- e7 |
  9. <script>: H/ {8 G6 K1 a7 n$ o
  10. new Vue({0 f1 i: |+ \/ T: P, y5 J
  11.   el: '#app',2 I3 k6 j( i" G) p6 H# B2 V
  12.   data: {
    ( k: r% z- M" d( D" u" X" c; l
  13.     sites: [6 T9 v. h. }! |0 s0 G
  14.       { name: 'Runoob' },. j5 ^) d" v" Z  L' u- x
  15.       { name: 'Google' },( Y$ }; K2 S8 z7 Y/ M+ N
  16.       { name: 'Taobao' }/ s0 i6 E- w, F9 A$ K7 h7 B; j3 @
  17.     ]
    9 Q8 d% f, \- X8 @! u
  18.   }$ w! F, l2 g$ o' n. B
  19. })
    1 x# Q1 G% s' Y4 G& e2 T4 }* ?
  20. </script>
复制代码
% Z( d" M5 a! `5 g1 j% M" I
# ]" r3 v" O9 _2 \3 u" b
模板中使用 v-for：
v-for
& S4 n4 S% y3 h7 g2 V
  1. <ul>7 m$ N! G0 u( B) j0 a0 c
  2.   <template v-for="site in sites">
    * v9 f8 ~# A* E) `9 W, a+ J
  3.     <li>{{ site.name }}</li>
    1 c7 f0 O; T+ e! e
  4.     <li>--------------</li>$ U) V# A2 H( W. }" d( I9 Y0 `2 L
  5.   </template>
    # N5 D2 Z# x9 s  t
  6. </ul>
复制代码
v-for 迭代对象
v-for 可以通过一个对象的属性来迭代数据：
v-for
9 M' z$ w& g) @/ S2 K; k
  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;">
    4 e! ^6 U8 o7 r& [* G2 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;">+ T! [( X( J7 D* ]$ X5 ]
  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;">1 H/ m7 y4 \& h1 a* S: N* J% A$ l. U
  4.     {{ value }}  g/ y. i( C$ l0 c2 m
  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;">, e0 x  R+ q7 b' F
  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;">
    5 Y* s8 g# t* y6 Q6 p
  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;">
    ! S0 y* e$ p6 G: C9 T
  8. . ~9 b4 y6 }# k
  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& G8 d6 V" h0 |
  10. new Vue({0 i, g# i9 E, i! d' [& \
  11.   el: '#app',8 D" |. P  J2 _: R1 i8 n1 t0 x/ c4 W. s
  12.   data: {
    $ l& _/ G3 [& e; I, F9 f
  13.     object: {1 ]$ _9 R/ J; y$ S! [
  14.       name: '菜鸟教程',
    4 U+ J8 d3 b2 Z' S" z
  15.       url: 'http://www.runoob.com',: {  O: E9 m6 T2 Y0 ^
  16.       slogan: '学的不仅是技术，更是梦想！'
    " n9 W  r2 s% E% C7 s$ E
  17.     }
    0 h4 u2 v( s* A
  18.   }' _9 l! `& |2 k! v6 A' T
  19. })! ^. ]! G4 R. e8 x! d0 a8 h% F
  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, v9 P; ?, Z$ A- N" }# W) A

( ?. g7 |& o% M, ]
  1. <div id="app">
    8 Y6 i( v. _1 k
  2.   <ul>
    ! ]8 Q& W: [2 I* c/ ~! }" c4 w- c
  3.     <li v-for="(value, key) in object">' R' _6 g: J9 p; m
  4.     {{ key }} : {{ value }}% n, |. Z+ `: z+ L3 I
  5.     </li>& n5 k' {( S4 L+ [
  6.   </ul>
    * ^+ W7 o- n: g" u9 k) d, W
  7. </div>
复制代码
第三个参数为索引：
v-for
% \! u* W' _( F" [, ^* k% J4 A
  1. <div id="app">, A2 u; u: U0 N* P- d. c
  2.   <ul>" a3 i! o& O% P- K' H- e, l8 y
  3.     <li v-for="(value, key, index) in object">* n7 a; j' S) _3 i" h+ O
  4.      {{ index }}. {{ key }} : {{ value }}  z. I) ?- p9 i4 O6 }& H2 v3 X' x- `
  5.     </li>
    / D2 E! \$ _8 V) e& a
  6.   </ul>
    ( [6 T% U+ r0 ^5 _/ i7 H
  7. </div>
复制代码
v-for 迭代整数
v-for 也可以循环整数
v-for/ ~8 |0 ]( I+ |" l

1 T; s3 F) {: w: Q
  1. <div id="app">
    : s) P! l% E2 B! {* z% E% B0 _
  2.   <ul>
    , p. R3 [' d' l8 P3 I- g; y
  3.     <li v-for="n in 10">
    + P3 f! H3 `/ G1 K+ K' D/ y
  4.      {{ n }}5 f, E( N' f& W7 ~- z5 \
  5.     </li>6 o% E! B" g0 ?$ V* \
  6.   </ul>; Z; D& v2 N1 @1 K
  7. </div>
复制代码
+ G3 C' o1 a# M  ]2 z. l( h
9 N0 S5 I' A  _" G; y* q8 `3 z

: v) Q. _4 q( b
, g- }+ V+ D# [+ g/ l$ t; k' V& b
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
回复

使用道具 举报

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

本版积分规则

GMT+8, 2026-4-30 19:02 , Processed in 0.051135 second(s), 19 queries .

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