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

只需一步，快速开始

cncml手绘网»论坛 › 站长博文 › 学习笔记 › 循环语句

发新帖

查看: 7619|回复: 0

上一主题

下一主题

[Vue.js] 循环语句

电梯直达

跳转到指定楼层

楼主

发表于 2018-7-4 10:56:27 | 只看该作者回帖奖励

回帖奖励

|倒序浏览 |阅读模式

循环使用 v-for 指令。

v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。

v-for 可以绑定数据到数组来渲染一个列表：

v-for 指令

<div id="app">
- @9 Z; J+ k* X- p
<ol> a7 {: b8 E0 v) B: q+ a: f" ?
<li v-for="site in sites">
, N: v# w* c8 d8 K2 e. ]4 Q
{{ site.name }}9 M( M2 K# j) k( N
</li>( @* f6 `5 P# `- D8 E; O. T- N
</ol>
7 @- P; R( O I0 R* |( v
</div>/ O+ a7 X% D1 q. H! M
0 d/ g# i+ E4 S8 O$ O7 u
<script>7 V0 M' T8 r m9 Q' g) g4 L
new Vue({
) c! Q8 ?' o) P
el: '#app',6 U! L/ h( W# K5 b, a9 X9 `; ]8 e
data: {
: W5 m0 K" w1 C0 b) s1 j! g0 a
sites: [5 P8 F$ {: D3 E; Q
{ name: 'Runoob' },
v$ Y5 y6 G% N- h9 }6 g
{ name: 'Google' },
) O/ s1 @, ~6 L, q( R+ [, s2 ]
{ name: 'Taobao' }' I( x9 o" d: F0 X, c0 o! m5 V
]
( W. K7 O& q3 p! R* Q" g" V) c
}
+ p! u; I9 y2 G( V {% O
})
# p+ E) S0 ?% p, B
</script>

复制代码

模板中使用 v-for：

v-for

<ul>
2 v+ A( d, f ]
<template v-for="site in sites">
. u8 O* N2 {5 G( b& F! W a
<li>{{ site.name }}</li>
' @: [& M, X% E# s6 H" w& ?9 e# \8 d
<li>--------------</li>
4 s" Y3 u: j- p( } ]
</template>! H) {+ Z2 h ^% V0 Q
</ul>

复制代码

v-for 迭代对象

v-for 可以通过一个对象的属性来迭代数据：

v-for

<div><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;"><</span><span class="hl-reserved" style="border: 0px; color: green; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", 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, "Andale Mono", "lucida console", "Courier New", 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, "Andale Mono", "lucida console", "Courier New", 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, "Andale Mono", "lucida console", "Courier New", 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, "Andale Mono", "lucida console", "Courier New", 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, "Andale Mono", "lucida console", "Courier New", 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, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">"</span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">></span><span class="hl-code" style="border: 0px; color: gray; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">, I L$ U% Y+ O. I' [% l9 N
</span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;"><</span><span class="hl-reserved" style="border: 0px; color: green; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", 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, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">></span><span class="hl-code" style="border: 0px; color: gray; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">. Q$ G& F0 J* {3 H/ G' W. M
</span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;"><</span><span class="hl-reserved" style="border: 0px; color: green; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", 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, "Andale Mono", "lucida console", "Courier New", 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, "Andale Mono", "lucida console", "Courier New", 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, "Andale Mono", "lucida console", "Courier New", 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, "Andale Mono", "lucida console", "Courier New", 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, "Andale Mono", "lucida console", "Courier New", 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, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">"</span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">></span><span class="hl-code" style="border: 0px; color: gray; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">
. m1 F4 A% ~0 O* ^6 }- @
{{ value }}
$ `( D" f5 Y1 b* I
</span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;"></</span><span class="hl-reserved" style="border: 0px; color: green; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", 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, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">></span><span class="hl-code" style="border: 0px; color: gray; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">
; Z& b. Q {5 ]4 C) M! x' B6 }
</span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;"></</span><span class="hl-reserved" style="border: 0px; color: green; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", 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, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">></span><span class="hl-code" style="border: 0px; color: gray; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">% P- E- f3 h" T7 h4 ]* W1 I* s
</span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;"></</span><span class="hl-reserved" style="border: 0px; color: green; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", 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, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">></span><span class="hl-code" style="border: 0px; color: gray; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">
! w4 l9 m& T) b4 w
, X5 h+ J L. k( j" y( |" E
</span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;"><</span><span class="hl-reserved" style="border: 0px; color: green; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", 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, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">></span><span class="hl-code" style="border: 0px; color: gray; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">
( }2 K) ^% K5 S. T4 f
new Vue({
, d6 c' E7 W1 v8 O( P' N# h' ~2 ^
el: '#app',
# T a4 o- ~5 y( m, y0 |2 Y
data: {$ [. C# ?0 H- J- g
object: {
1 g+ w+ K: P+ c0 F1 U
name: '菜鸟教程',1 _9 C& c# A1 |
url: 'http://www.runoob.com',
1 p& U7 ?3 r0 ~4 ~$ K, J
slogan: '学的不仅是技术，更是梦想！'
# d+ { [, ]& P, l. T. h
}
# Q }) b3 u9 C$ w* @( M
}
( V5 G, c, W) A d& J
})
+ h* @# `+ E+ B( k' P3 J# g2 q1 W
</span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;"></</span><span class="hl-reserved" style="border: 0px; color: green; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", 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, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">></span></div><div></div>

复制代码

你也可以提供第二个的参数为键名：

v-for

<div id="app">
* A0 @. E) w. G: ~' ?
<ul>6 K0 C. v. y3 G6 s$ V0 T' P
<li v-for="(value, key) in object">- c8 B% ~3 m1 j8 a; N' ^, k4 N
{{ key }} : {{ value }}
. M( \; B. K! Q$ s1 S8 X
</li>; H+ x) a4 Y. \. r' S! u8 L9 w0 I
</ul>0 t( ^0 X1 A5 ^) B8 ~7 Q* G% X
</div>

复制代码

第三个参数为索引：

v-for

<div id="app">
; z5 ]8 E) [- z$ O2 z& R5 I
<ul>8 |# G. p( f/ N7 T0 S( `
<li v-for="(value, key, index) in object">1 i9 j* p& V: ]( Q
{{ index }}. {{ key }} : {{ value }}' X- `4 L! i, y: E0 Y3 F3 n" {7 `
</li>
0 \' @) `$ e# q/ H+ `- |) c1 D
</ul>
0 G) o# e; D( Y8 q* i) `$ n) u
</div>

复制代码

v-for 迭代整数

v-for 也可以循环整数

v-for

<div id="app">
, f$ G7 v9 c' q2 y! }
<ul>' X: c7 ~& W4 V( F9 T% w h
<li v-for="n in 10"># Q6 L( i5 v% h- `) z& c
{{ n }}
, `/ u1 M/ Y% Q! D
</li>
& q. K! c3 w- [
</ul>
% n, W, h4 W0 O' d; T& N! p8 V
</div>

复制代码

分享到: QQ好友和群 QQ空间 腾讯微博 腾讯朋友

收藏0 分享 支持0 反对0

回复

使用道具举报

发新帖

|

|

|

|

备案信息代码：冀ICP备18019919号-1

GMT+8, 2024-12-22 21:04 , Processed in 0.150537 second(s), 19 queries .

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