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

QQ登录

只需一步，快速开始

 找回密码
 立即注册

QQ登录

只需一步，快速开始

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

[Vue.js] 循环语句

[复制链接]
admin
跳转到指定楼层
楼主
发表于 2018-7-4 10:56:27 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
循环使用 v-for 指令。
v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
v-for 可以绑定数据到数组来渲染一个列表：
v-for 指令1 T4 B% i' n! H) Y, ^: {# d: T
  1. <div id="app">2 F, P. u! t+ u4 }$ @7 C
  2.   <ol>) _$ F# ^! h7 X
  3.     <li v-for="site in sites">
    5 o* q1 S' K. W( ]* e
  4.       {{ site.name }}
    # Y3 a5 F& c$ A+ j6 }' C7 ?* n
  5.     </li>: I. [3 C0 {: ?/ B: Y2 }3 V" o* X+ y, ]
  6.   </ol>/ D' \/ P2 S# ?7 Y  b5 F
  7. </div>
    5 }8 v# o& K# N# b: y
  8. 8 K- [+ _3 Z, C: L. F
  9. <script>/ @( G: p# Q+ f3 ^7 Y# P& [# h
  10. new Vue({
    % H  F6 b0 |% b2 n
  11.   el: '#app',1 q) E& k- t3 f2 \4 ]/ s3 }
  12.   data: {# p# E& j& g" ?2 }6 Y
  13.     sites: [% Q$ N6 x5 f% p3 q$ q& @
  14.       { name: 'Runoob' },: R. I- l& O* |' J/ a8 S8 N) w+ c
  15.       { name: 'Google' },
    " t. X  a. t: n
  16.       { name: 'Taobao' }( k3 {# u; J+ b$ j- w: Q* F
  17.     ]# r! @- [3 U( Y7 k$ `5 Z
  18.   }
    7 t% X; M; H0 L# C& a  S
  19. })
    - o; h# s$ c9 u8 _5 u) I- t
  20. </script>
复制代码
5 v; \$ N3 q+ {7 J2 E

" J1 t6 R6 e+ v* Y& k
模板中使用 v-for：
v-for
. Y3 F8 U& \( {' h
  1. <ul>
    8 ?! D# Q' s! Y! C- O5 l
  2.   <template v-for="site in sites">
    # Z" S% n3 M# M& O( r: I
  3.     <li>{{ site.name }}</li>9 X3 h& v  T3 C6 X
  4.     <li>--------------</li>
    $ t) F) N7 r$ r8 X/ t, y  N8 \
  5.   </template>
    1 p; M* p/ @; @6 d
  6. </ul>
复制代码
v-for 迭代对象
v-for 可以通过一个对象的属性来迭代数据：
v-for
8 ^. s# q  T4 B1 F# t7 {
  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;">
    * m; z- @$ I4 P. [
  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;">
    0 ~$ e* y5 H, [# M
  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 p$ q9 o& m0 N
  4.     {{ value }}  B- a) w; X1 v
  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;">8 m1 l# Q" e7 o$ ]' ^1 k( X
  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;">$ X3 i% W6 t! d. W7 u6 q
  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;">
    " @4 Q8 t9 L, R' W; O4 c

  8. - c% ?: \6 @  h- b6 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;">' O( J+ |5 e5 T2 |! c
  10. new Vue({
    * d' i/ E9 @3 [- d9 s
  11.   el: '#app',
    5 W: @: ?- c( n& h1 B4 L" X" ^
  12.   data: {, B6 K% ^) g& ]5 j, H+ X6 w! p
  13.     object: {
    5 O1 G5 ?' A8 U6 l$ o
  14.       name: '菜鸟教程',7 `' O( W" w6 T( k  ?. \
  15.       url: 'http://www.runoob.com',0 u3 X: U: y: {6 ]7 I; l
  16.       slogan: '学的不仅是技术，更是梦想！'
    6 M' ~  d5 c1 L6 w
  17.     }8 l& g. ^  a1 D( x3 r" m6 M
  18.   }; p2 Z' `3 E& B  ~( t
  19. })+ o: Y4 m# t& ?0 Q4 L' F$ |4 q" W
  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
% \% S( a; G1 L6 U. [+ u: l2 Y' s2 S3 t8 C
  1. <div id="app">
    " _2 x: m( c# j0 X' n# D
  2.   <ul>' E: ]( g2 a( n4 Y" I; e8 _. G
  3.     <li v-for="(value, key) in object">4 l" l% @) G9 `' e- ^8 b7 W
  4.     {{ key }} : {{ value }}
    * D/ r6 w6 K2 y9 q6 S& c  K) K
  5.     </li>1 H; @  J  E+ B5 l$ V: b, e
  6.   </ul>) R7 F$ t$ ?- g! v/ u: E( h7 t( k
  7. </div>
复制代码
第三个参数为索引：
v-for
" ~7 ^: e* a- F$ Z* i" z" O9 \% b3 k+ v6 G! n& A. d" X
  1. <div id="app">5 k+ D, U! Z  d+ R- L
  2.   <ul>
    8 }$ c$ ^$ @& E. a: d) I9 ]
  3.     <li v-for="(value, key, index) in object">
    . \5 g5 H1 Z$ ]3 |
  4.      {{ index }}. {{ key }} : {{ value }}
    # R% f; V9 L: P/ t2 |" S/ j
  5.     </li>- K) ^1 f) g5 b% u  b
  6.   </ul>
    7 f; ^' [+ o5 c/ o2 u" o
  7. </div>
复制代码
v-for 迭代整数
v-for 也可以循环整数
v-for
& u1 O3 a, w" Z" g8 p1 [5 O( W  _" d7 g& m9 ^  X
  1. <div id="app">. F9 u8 v  @) k' w& ^- V( T5 i% e
  2.   <ul>$ n' x2 p+ a7 ~
  3.     <li v-for="n in 10">
    - W5 A' ^, b5 v/ @: n  [& J* U% C1 x: O
  4.      {{ n }}
    ; O1 y8 P5 P8 V/ K5 U& [- {; Q. j. ]
  5.     </li>5 v7 Z5 J7 s* _! ]+ v/ G% D2 E- p+ P
  6.   </ul>
    ! ^8 O/ c: J( [; @% y
  7. </div>
复制代码
0 P; h/ y2 l8 x% I# \% m

" E, N3 Z8 O3 w; c7 X, ]# f9 l9 U' J3 G3 T9 ?; F; r: r
$ a6 m3 {6 i1 Z# t3 F9 U7 H
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
回复

使用道具 举报

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

本版积分规则

GMT+8, 2024-9-28 06:33 , Processed in 0.135606 second(s), 20 queries .

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