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

只需一步，快速开始

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

发新帖

查看: 9941|回复: 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">
" V( o- z0 G$ ^ z( v% H2 ?
<ol>
* g4 X$ O- O1 q
<li v-for="site in sites">
* r) g' U% n5 U( |! s
{{ site.name }}6 ~; |7 r* p" L( [
</li>7 F- `6 J5 z9 U+ Y6 E5 Y
</ol>
6 X) N* O' w- n( F7 ~+ i
</div>9 p5 d6 u, G* _! j" {
' s% V! i1 K% h. R7 x# R/ [9 O
<script>5 \1 n. H" J H- r1 V6 u f# T
new Vue({# F: L+ h; u) \+ v
el: '#app',
& L8 h: Z/ K+ c. u, M' ?2 M4 q
data: {3 s2 i0 R0 p9 x. u# O
sites: [$ Y) f: O) W0 H8 z4 ~6 K! B
{ name: 'Runoob' },
+ m% k; @/ f- r0 N7 V1 f
{ name: 'Google' },2 e" |! x0 a& ]4 v! @
{ name: 'Taobao' }! X1 @/ `9 s% U! \
]
9 {6 w, t& A; S( ]1 B
}
$ f7 v e! S$ N; V3 W
})
! s/ E. i. {: u
</script>

复制代码

模板中使用 v-for：

v-for

<ul>6 L- N9 f9 t! b( _' p' b
<template v-for="site in sites">
/ ]& b3 ? w- D& T( R8 v
<li>{{ site.name }}</li>1 y: V: U$ ~# r& R$ z
<li>--------------</li>1 T% \) v4 _8 h+ ~4 ~8 w
</template>; m" G6 D' {3 `# |- Z9 F7 ? ]
</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;">
4 G# J/ k9 o8 r9 Q$ 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;">
; J( w8 r, R: W. d; C) w3 ]; 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-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;">
, j/ P; e2 p U: F: C
{{ value }}) {0 {# u$ e4 ^
</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;">
5 F4 Y9 s7 M* a$ _5 G
</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;">
/ c6 k% }4 s2 }# t0 c4 O2 R- {
</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;">
2 e2 a6 o8 e9 u6 |0 m8 j
# f3 }7 `) @& S+ W% n! F
</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;">7 C! Z8 J# |) F+ a" h+ G
new Vue({
$ J7 ^8 K/ i7 h5 O" X! l
el: '#app',* A+ K. K3 a& C
data: {
5 u* a5 o6 `5 W) w! W t$ k& p1 B
object: {
( W. f% u% O- w
name: '菜鸟教程',
8 r G7 g; y$ c7 c, F& n
url: 'http://www.runoob.com',
. X2 O4 f0 h% g8 s5 u
slogan: '学的不仅是技术，更是梦想！'
5 \. V! }) {7 y* U6 ~
}
: g D4 u& i7 l. z' A$ g! U" z
}2 a; G. v* b2 q+ J- {
})$ f- p! R" a9 Q) N9 a
</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">4 P8 [( }% j( F9 W W& _, E
<ul>5 o: P* E4 u7 K& k- ]' e& |
<li v-for="(value, key) in object">& X2 z) n$ i% E; `4 Y: @
{{ key }} : {{ value }}' K1 q3 l/ {8 b6 b1 W/ a9 C+ S# d
</li>8 K6 L% d- M4 l# S5 M8 M
</ul>
+ B. e6 r' m; Z9 d; V0 p7 }
</div>

复制代码

第三个参数为索引：

v-for

<div id="app">
( a$ i6 d* J" \5 ~
<ul>
( Z& h' s8 \. N2 d+ N) p+ u! h! b
<li v-for="(value, key, index) in object">
& [& R2 d" F) z
{{ index }}. {{ key }} : {{ value }}
H" }' D) _$ ?! i4 \* q
</li>7 }* D& p- C3 U
</ul>% a$ h, S1 S; J( @; R& \) o7 I) A
</div>

复制代码

v-for 迭代整数

v-for 也可以循环整数

v-for

<div id="app">
( I1 V6 k: Y- k+ D' n8 i* V, T
<ul>2 p/ U4 d A5 Q% T8 e* k- l# g
<li v-for="n in 10">7 M" g- `0 q, u+ i( f
{{ n }}
! k0 x) X% u0 j7 {2 G; M) k T9 \
</li>5 Y t) u! K6 j! p& g/ K; U
</ul>
; C3 R; G& u4 ?+ C: l( }
</div>

复制代码

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

收藏0 分享 支持0 反对0

回复

使用道具举报

发新帖

|

|

|

|

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

GMT+8, 2026-3-16 18:44 , Processed in 0.057709 second(s), 20 queries .

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