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

QQ登录

只需一步，快速开始

 找回密码
 立即注册

QQ登录

只需一步，快速开始

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

[Vue.js] 循环语句

[复制链接]
admin
跳转到指定楼层
楼主
发表于 2018-7-4 10:56:27 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
循环使用 v-for 指令。
v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
v-for 可以绑定数据到数组来渲染一个列表：
v-for 指令8 Y, I& Y+ l" u
  1. <div id="app">
    0 K! @# u3 v3 o" o) m& G. c
  2.   <ol>$ c/ S$ E9 c3 e5 s0 {' f5 O  _$ n6 _
  3.     <li v-for="site in sites">
    + A$ t9 e1 z8 r- x7 T
  4.       {{ site.name }}
    3 Z5 Y1 R2 U1 S! Y
  5.     </li>1 j! p& N; c) ~2 V0 G7 U: }7 B' A4 Y
  6.   </ol>
    9 ?: ]6 E6 \) B, [
  7. </div>
    7 V) E& e3 t/ i% `4 i

  8. ' B' z& g4 F- c, r% q
  9. <script>
    6 C( X. C7 a& I8 W# _# `$ |
  10. new Vue({$ ?) z* t: c  I/ \
  11.   el: '#app',, M* G7 V+ Z5 K! B
  12.   data: {* d! y/ b4 L7 W( X4 |9 L
  13.     sites: [
    ' t2 i: L, d( l" J& |; U5 |% h9 O
  14.       { name: 'Runoob' },
    1 V; \# a/ ^8 b) x- i# y
  15.       { name: 'Google' },
    - O, ?  r  @) o5 p: z$ d4 b& _% f
  16.       { name: 'Taobao' }
    / R" b, f' ~+ x$ ^
  17.     ]' a. d1 y, A( T) @  l3 `
  18.   }  {  d: V2 c- O5 Z5 r4 A
  19. })+ P) e2 a( ]7 p5 `
  20. </script>
复制代码

* J$ U: F8 v- e6 c7 M4 A2 I- ~# W2 s5 t9 C4 m9 z+ A& H
模板中使用 v-for：
v-for
0 G9 y( d+ Y5 N! h# q2 F, k
  1. <ul>
    5 `6 n# T1 U+ h. F, x5 k7 F
  2.   <template v-for="site in sites">6 I8 U6 s8 V2 K0 }" |5 J
  3.     <li>{{ site.name }}</li>
    9 c/ e  j+ w2 z5 f
  4.     <li>--------------</li>1 }" U% k0 W7 k4 g
  5.   </template>
      `% I9 _% u, u+ N; o( a* Z+ z$ j: y
  6. </ul>
复制代码
v-for 迭代对象
v-for 可以通过一个对象的属性来迭代数据：
v-for
# A' |# b$ P0 T  }6 T( @: H
  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- ~/ u$ z+ e4 H6 {1 ]
  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;">
    $ F* e4 l0 H' _9 E; W' e  z
  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;">; }& k9 f( o# {' y2 y8 v
  4.     {{ value }}
    ( [: q3 J$ `' c3 A6 I  ^9 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;">+ F* g3 d! [( N& y% O/ g+ z
  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;">! V* Y: _* m9 v9 w! a# ~* r5 ?
  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 A  D. s( G/ ]3 B9 x: u' k+ V
  8. ( B8 G/ E; E5 }; r! 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;">
    % Q, L. Z. h( t/ {2 o; o
  10. new Vue({
      t- x; `( B- ]$ k% p; _! a
  11.   el: '#app',! G) |) L- ^4 v/ A7 D
  12.   data: {
    / Z. L7 T* b, {$ @
  13.     object: {1 ^& A0 y; q  l1 s- H5 {3 C' d
  14.       name: '菜鸟教程',$ P* p' A# o3 B& u
  15.       url: 'http://www.runoob.com',
    ( c& f  {  ?& _2 W
  16.       slogan: '学的不仅是技术，更是梦想！'% Z: Y. [9 L$ S8 Y
  17.     }
    ( Z# ]- r. P) V! |
  18.   }: B- n# {) j/ T8 L! F' R
  19. })
    : }/ W$ x/ R4 R  F3 ]' ]8 ^
  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  i* S% m) R3 X7 @

% m7 y9 l. I) G$ O; X6 j3 I
  1. <div id="app">) p& N) |6 B( U/ g
  2.   <ul>; v2 A6 V5 E, Y* e; C! [$ g
  3.     <li v-for="(value, key) in object">& w, s3 j0 q. ?& s' q! l4 r1 l6 u
  4.     {{ key }} : {{ value }}6 c* p. L1 J: _
  5.     </li># v" N7 a: q: w: s) n
  6.   </ul>3 p# b2 Z, p1 T
  7. </div>
复制代码
第三个参数为索引：
v-for
( l9 E/ r- B% [& b( J
" F5 S3 T, W! s5 g
  1. <div id="app">5 ?6 x/ b; H: n$ S( |5 O
  2.   <ul>
    # ~6 M2 p* Z. `) o8 Y4 X- ^
  3.     <li v-for="(value, key, index) in object">% j4 y2 S. X# e
  4.      {{ index }}. {{ key }} : {{ value }}
    3 J2 g5 P: E9 K* S; c+ _
  5.     </li># V7 W/ z/ Z# C3 j! a+ j) Z
  6.   </ul>
    ) E1 Y; ]- S4 p$ A
  7. </div>
复制代码
v-for 迭代整数
v-for 也可以循环整数
v-for. s$ F! e/ ]  F5 z
6 _& p- n. D9 O  u! @: ^" @
  1. <div id="app">
    4 G" X1 T9 W! r$ J
  2.   <ul>1 E; t4 G4 e$ a
  3.     <li v-for="n in 10">
    " M) T& ]0 O2 U; {! A( u) i
  4.      {{ n }}$ A" T) Z! C" i* E; ^' n& m
  5.     </li>
    & H& t  B" m4 B$ b2 i# I& J* D
  6.   </ul>
    ( ?: ~  m2 O, E2 B% Y- z. i+ T
  7. </div>
复制代码

* o6 `' i3 u* y! Z  S5 v, K9 d, D, D
2 u! s9 T# c& h8 F/ f' V, m
  C* C- @7 {: I) Y4 e
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
回复

使用道具 举报

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

本版积分规则

GMT+8, 2026-1-30 18:02 , Processed in 0.058599 second(s), 19 queries .

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