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

QQ登录

只需一步，快速开始

 找回密码
 立即注册

QQ登录

只需一步，快速开始

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

[Vue.js] 循环语句

[复制链接]
admin
跳转到指定楼层
楼主
发表于 2018-7-4 10:56:27 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
循环使用 v-for 指令。
v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
v-for 可以绑定数据到数组来渲染一个列表：
v-for 指令
7 j5 H3 s$ l- Z" Y9 E2 o) ^
  1. <div id="app">+ u3 b# o  V4 B8 W% \8 }
  2.   <ol>
      _. f5 B( ~) J; E$ o3 W8 O- i% `
  3.     <li v-for="site in sites">9 X0 ?( [6 Z0 N# B7 n& L
  4.       {{ site.name }}
    + G# H* v, s& o8 [. H
  5.     </li>! e0 G3 T/ y! G7 |
  6.   </ol>. a& K0 p- U" w$ k  R
  7. </div>
    : _) _* u" y, ~* N3 W7 I
  8. ( x8 K7 `, y2 `' ]- V
  9. <script>+ O7 W& s9 j5 J% C; M
  10. new Vue({
    8 ]: r6 i3 z( G4 P4 g
  11.   el: '#app',
    ( z0 q3 D6 h# p0 H8 h8 d/ ]
  12.   data: {# q! q& Y1 q$ r+ g  C% b" Q4 L
  13.     sites: [
    # V9 s; ?* |3 v4 A: W. P- I" L' T
  14.       { name: 'Runoob' },7 _5 V& D; A& }. W
  15.       { name: 'Google' },# N2 i0 A& L+ h: V  ?
  16.       { name: 'Taobao' }# I$ ]2 j1 ]/ U3 f( ~2 o
  17.     ]( c$ d- S( L2 H* E& c
  18.   }
    7 b7 _  b" K7 H8 S# B; K; `
  19. })
    3 ^: q7 e* w7 S" `" ~! T
  20. </script>
复制代码
" s6 O1 r% q  W: ?! D

3 b. ?$ b" E9 G4 o6 s7 y. a
模板中使用 v-for：
v-for; z+ i% L- c# l4 y
  1. <ul># y' e3 r. p9 I! Z
  2.   <template v-for="site in sites"># J! J/ T8 _) ^
  3.     <li>{{ site.name }}</li>, d( k( f+ t5 ]  m
  4.     <li>--------------</li>' \: |; E" d! v3 U
  5.   </template>. o; o* P3 e+ I4 M$ E  X; ]. W
  6. </ul>
复制代码
v-for 迭代对象
v-for 可以通过一个对象的属性来迭代数据：
v-for9 y* [) ^# F8 Q0 J$ b5 W
  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;">
    - I+ J7 t  a2 |5 e1 b0 @5 E
  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;">
    7 Y. N0 ], A+ a) S
  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;">
    & z6 L1 w" T! g2 s5 P. f
  4.     {{ value }}
    : `4 {) w$ q8 x6 T
  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;">
    : p$ V# ^1 W# m0 s8 O5 d1 Q
  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 T  B  @$ G! ~0 p# t, 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;">8 S: o! h5 h# W
  8.   f1 ?6 }6 a6 J0 T: f) X
  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;">* Y" p5 p7 B8 A; |. x
  10. new Vue({" [0 V" H" N# i
  11.   el: '#app',, y1 c2 h: z! Q4 b* ^( K
  12.   data: {0 V# ]+ N# E1 b0 }+ n0 j2 `& |
  13.     object: {/ Q" S2 N2 I" a' @' f0 p
  14.       name: '菜鸟教程',! n( I0 [" O2 Z& O0 h9 l8 j
  15.       url: 'http://www.runoob.com',
    # A1 U" J: y. S/ f0 }
  16.       slogan: '学的不仅是技术，更是梦想！'
    2 _& \1 Q' z( \$ j* h
  17.     }
    + F6 J$ q4 U4 k" ]5 i2 l( n
  18.   }
    ! `9 o. f1 {7 w1 p7 Q: M1 V0 b  Y
  19. })+ |1 ^; ^8 l9 W; v( e
  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
' s7 j: G1 h* W; a
. q' \1 H8 `! V- H) z
  1. <div id="app">
    0 x. r/ W6 s2 o# T" s; W  a
  2.   <ul>" n; `, Z7 r. U/ _5 G$ u3 F
  3.     <li v-for="(value, key) in object">
    5 f" K; E! f1 @( Q7 Y6 s
  4.     {{ key }} : {{ value }}
    . F5 h6 |0 U  `0 {* z/ M( Y
  5.     </li>
    $ V1 z$ V6 J6 M5 E$ S& M- {0 q4 e
  6.   </ul>
    , s8 q3 p5 q3 g/ y- g9 n
  7. </div>
复制代码
第三个参数为索引：
v-for
2 {) ^! b! _% p3 {' r/ r- m. }: Y2 J) H
  1. <div id="app">. G" |$ J, p" I# N% U
  2.   <ul>
    % q9 i) x% ]: P8 {0 B; [
  3.     <li v-for="(value, key, index) in object">
    - ]6 m4 V( x/ l; y  b! t
  4.      {{ index }}. {{ key }} : {{ value }}
    : A4 \. _+ g6 m1 k
  5.     </li>( x, b4 z/ q% T7 b2 D
  6.   </ul>
    3 n% |, K  `& @+ K8 }* S
  7. </div>
复制代码
v-for 迭代整数
v-for 也可以循环整数
v-for
' l) G6 O% z7 o( I* w) j  a* q2 y  U- g0 n& Q0 m
  1. <div id="app">0 v6 K; c6 h2 F9 @
  2.   <ul>
    - ~6 N. S5 p6 z
  3.     <li v-for="n in 10">
    0 j- t6 P# x6 J5 o' @( I! @. P
  4.      {{ n }}( r$ M% h5 @6 f2 r+ r, M' D4 \
  5.     </li>
    % g3 K1 k' W* t8 ~2 ?% M* Q# N, b
  6.   </ul>4 w8 N& r0 F3 C6 `2 v! S# H
  7. </div>
复制代码

. ^& L: r; P- I3 I1 K- Z( E
9 K0 G9 W0 R2 ?  a$ Z6 R- S1 r7 A  k" h+ r9 @

" x5 m; e: \* U- G. b0 X
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
回复

使用道具 举报

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

本版积分规则

GMT+8, 2026-8-4 10:54 , Processed in 0.066109 second(s), 21 queries .

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