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

QQ登录

只需一步，快速开始

 找回密码
 立即注册

QQ登录

只需一步，快速开始

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

[Vue.js] 循环语句

[复制链接]
admin
跳转到指定楼层
楼主
发表于 2018-7-4 10:56:27 | 只看该作者 回帖奖励 |正序浏览 |阅读模式
循环使用 v-for 指令。
v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
v-for 可以绑定数据到数组来渲染一个列表：
v-for 指令6 @# O0 o) v( k2 h  ?$ v0 T
  1. <div id="app">' M2 W5 U# s) s. N, K
  2.   <ol>
    # q3 C' o: K+ h3 Y
  3.     <li v-for="site in sites">; x. o6 C" W7 I" g) M: C
  4.       {{ site.name }}( r4 f  x& r2 O3 I6 b5 {* P# i
  5.     </li>) U7 y. M' l9 d1 }$ H
  6.   </ol>
    / y! }  Y" b( e! I; U, V
  7. </div>0 A8 h& q  k5 g. i9 G9 F4 L
  8. - A' u% S# d* q2 e" _5 X
  9. <script>% b% M0 U* J; T$ g" i
  10. new Vue({
    # K; y: C. E. k; k2 A9 X" B
  11.   el: '#app',+ ~9 ~! L" [& P- W' O* f2 j
  12.   data: {
    3 z- V6 c1 U7 a; t! W  P0 _
  13.     sites: [
    9 g7 Q* l0 [5 v  ?/ {0 \
  14.       { name: 'Runoob' },
    + F  N9 n( Y) p- Q9 o7 q
  15.       { name: 'Google' },
    9 }# `- s: s% @6 P+ w
  16.       { name: 'Taobao' }: u" B4 J0 F/ I0 I, G: F% y: a- ~( e
  17.     ]' j% X7 J7 B' l7 B7 T; A' Y, p5 O
  18.   }
    : D8 g- J9 d& x; T4 a+ L
  19. })
    * ^/ E$ J: \; u8 N" Y4 }3 U! M
  20. </script>
复制代码
, Y8 f, E' |( u8 q' v

& S) R% t0 [: z, ~% v2 ~; ]6 I) m
模板中使用 v-for：
v-for3 b: c- }$ k! b& ]) N4 L
  1. <ul>
    4 a  I. ?# B* h0 |) m6 Z
  2.   <template v-for="site in sites">
    6 j' P1 B& U3 n1 w) E- @
  3.     <li>{{ site.name }}</li>+ f2 o" V. E% i; y9 s# E  P' W
  4.     <li>--------------</li>& t/ X( t  X$ Y+ ^+ f% |/ ~
  5.   </template>7 `/ m4 T& p% O" b
  6. </ul>
复制代码
v-for 迭代对象
v-for 可以通过一个对象的属性来迭代数据：
v-for& D/ E* V; E5 G% v, B7 ]
  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 W4 z- v* J8 D0 i- }+ v, s
  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;">% V7 J8 a" _: H" v3 G0 J
  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;">
    $ ?- h2 T' U4 }" S
  4.     {{ value }}
    ! }, f! J' v) a
  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;">
    . x7 j4 y8 W+ `! E* E
  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;">" p, w7 J) q6 \. w
  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;">2 ^6 x# P% H: G' z% R6 g* j+ ~5 e

  8. . U6 ?& M3 I  G! k& G0 [; O( T
  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;">( @, m9 @' d: n7 y1 r
  10. new Vue({. U  T9 ]& d3 r$ B8 y
  11.   el: '#app',
    % d( p* v5 b" P0 e0 y! K1 v; ]
  12.   data: {& _5 y* l% S8 U7 J3 a  Q+ `
  13.     object: {$ m7 y3 V& N  B$ [8 G" A, ^
  14.       name: '菜鸟教程',1 z. b9 E. Y) ~" L: m9 M% w( P
  15.       url: 'http://www.runoob.com',
    & a: c! _5 z3 O, R' K" M4 S
  16.       slogan: '学的不仅是技术，更是梦想！'% g* y7 l6 j0 Q2 u
  17.     }
    ! |, ^0 f' ]) ~7 @  u# `
  18.   }* q$ M8 q' S0 k$ C- K5 y3 h5 j5 }
  19. })
    # D# h, N4 r* I3 d7 t7 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-for0 ]$ x7 {9 T" ]. X5 A7 I) {
9 H, ]  ~# b% x- C5 e. L& ~' M0 o
  1. <div id="app">
    # C# n8 v. x8 g+ Y  I$ v  @
  2.   <ul>
    ! s3 s" G- `+ N( F1 ^" r* Z  I
  3.     <li v-for="(value, key) in object">
    1 J! e6 y# [  t# ]
  4.     {{ key }} : {{ value }}3 a. \; |; J  K( j& |8 @
  5.     </li>
    " D4 r" P' K" T$ o$ T) W0 J
  6.   </ul>
    & p' j; N/ y. l& C3 W
  7. </div>
复制代码
第三个参数为索引：
v-for$ k2 ?- o* _4 ]( L$ G4 v& M

: u8 y2 \5 L3 _1 {8 k5 H' n
  1. <div id="app">: W9 O( n6 ^, X. w* P. P
  2.   <ul>! H0 p% D6 O5 X( H) L0 d
  3.     <li v-for="(value, key, index) in object">
    ; x* V$ `, c2 u. W
  4.      {{ index }}. {{ key }} : {{ value }}
    ! T+ j5 Q) y) {: [5 o* f
  5.     </li>& A" f$ c+ y' @/ c8 ~' v$ m
  6.   </ul>1 r+ r+ \; }( x' P: Z. j
  7. </div>
复制代码
v-for 迭代整数
v-for 也可以循环整数
v-for
8 F7 c9 R/ C  [9 W# H' i; E" m& b% J4 U0 O# W: U- F5 i
  1. <div id="app">, n8 H) @" ^1 h9 a0 ~: C9 H+ w
  2.   <ul>
    2 Y- }! `8 u( h
  3.     <li v-for="n in 10">
    ( s% y2 U# [$ m- E, Y# ~
  4.      {{ n }}
    7 ]- {, T) H: J# Q8 T0 U5 }
  5.     </li>0 @" x$ u% q  l7 K$ T" k. A# s5 T9 n
  6.   </ul>' I- _1 E1 C, D1 z
  7. </div>
复制代码

$ B) `3 v% n, `7 @" a( T( V, H# c  N4 N2 ^5 {$ M
8 u1 Q+ s0 p. m2 ~9 S2 M& a$ k
$ M% s3 h* n" g' Q1 ?
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
回复

使用道具 举报

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

本版积分规则

GMT+8, 2026-1-30 15:02 , Processed in 0.058229 second(s), 20 queries .

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