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

只需一步，快速开始

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

发新帖

查看: 9939|回复: 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">2 [* R& [) C7 j6 L0 a
<ol>
! J. U1 s8 ~: H4 }$ c% e
<li v-for="site in sites">4 [5 K& w { }* \. V
{{ site.name }}
5 N- ]) R2 \( l8 x' m. p4 k3 w) V
</li>* L, e: B+ a% I7 ?: T, b
</ol>8 b% x5 \+ G% r6 w( A
</div>
4 m' r; G; e" d# z, f9 _: s
8 @9 n+ k. u- [. W( ~/ F
<script>
2 \0 \, e2 H4 K3 d) C \1 Y" }& M
new Vue({
3 t" g$ _* R+ J* A; e& P
el: '#app',; ~1 c8 v5 w& H" g
data: {
! m+ ^1 S4 A' i" ]8 f# L) E' x! G m
sites: [: H0 ^6 i; `) R* t+ C5 P
{ name: 'Runoob' },* k: t# L4 A' a$ o2 u
{ name: 'Google' },1 D5 V' F) m& Q0 L% C6 x. K8 h
{ name: 'Taobao' }
# B7 \0 E( X) |+ |& X/ b! A
]# b. p( F @( v0 M) _4 i) ~
}8 R- x4 P5 e" ?
})
6 }9 w% p( u1 z4 R3 u
</script>

复制代码

模板中使用 v-for：

v-for

<ul>4 [ V1 Z7 e! k0 e" o8 o4 C, d4 _8 Y
<template v-for="site in sites">
7 [9 z/ Y' X: |# T3 ~2 W
<li>{{ site.name }}</li>
" m2 P- m9 m) y j: K3 K. K
<li>--------------</li>8 P9 e2 h( @2 s0 G: _- H, H" m; ~+ k' H
</template>/ p4 B! g0 V3 A+ Q% y1 R
</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;">
( a/ ]! S8 }4 ]5 B% k
</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;">
9 t! Z- f. F e* _+ |: M o
</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;">
( N' m7 l5 R( f8 Y
{{ value }}* e! ~' |* {% W2 _
</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;">
% A6 d9 G: L! J5 l6 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;">( w4 d* U4 t* H% V# C
</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;">
0 } p, P9 B- I( i, Y
8 Y3 Y* F' B9 b9 \
</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;">
8 [( @4 m; W7 y- d& A
new Vue({
8 B. j4 C5 ]4 i' K& Z
el: '#app',$ w. T1 ^6 J1 c; U, K( ^
data: {/ E& [+ W: s4 R$ N8 b
object: {
: t' }$ h5 g! M) H' j% U1 Z# X
name: '菜鸟教程',
$ `) }7 `+ e' ]3 B4 Z/ O
url: 'http://www.runoob.com',
- v& A/ L8 ~* t* \ ~% h/ F% ^
slogan: '学的不仅是技术，更是梦想！'5 ^2 D' H. h7 |0 a; F6 h! r5 Q
}
6 r3 V1 _. \ F) c" V0 V
}" ]) H9 [6 G/ p7 v+ s
})
* V1 d2 b# V* Y
</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">: r0 T! d8 O7 y% J+ T% V
<ul>
* |0 k6 z- B$ t0 |
<li v-for="(value, key) in object">7 r) W& S$ a9 I/ ^: `1 t" B' G: [
{{ key }} : {{ value }}
& ^# b$ K. i" X2 N
</li>- |) `$ Z/ T# g# M$ k- q
</ul>
) i$ R; C8 i. t: p8 F0 ]
</div>

复制代码

第三个参数为索引：

v-for

<div id="app">5 |2 v1 W6 o% a; G( T
<ul>
/ }' l8 H* \; d$ Y6 G' i5 k$ ?
<li v-for="(value, key, index) in object">" r2 e+ n7 c, {5 c( G
{{ index }}. {{ key }} : {{ value }}7 ?# A' S% g' `
</li>( }1 ?8 I6 R& E. Q4 G# f
</ul>
5 Q# r3 z; G# @' x
</div>

复制代码

v-for 迭代整数

v-for 也可以循环整数

v-for

<div id="app">& L) l x1 I: w: \
<ul>
. D0 C* T; A5 _* F0 i8 Y: m1 q3 n
<li v-for="n in 10">
9 r$ K6 q% E/ J
{{ n }}( b, |( r! x G& X8 B7 i# D0 K7 ^
</li>
& Y1 g& h2 K/ }2 T) V; O. K$ g; j
</ul># H* ?, X6 ?0 m& G$ b. d$ C
</div>

复制代码

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

收藏0 分享 支持0 反对0

回复

使用道具举报

发新帖

|

|

|

|

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

GMT+8, 2026-3-16 18:41 , Processed in 0.056683 second(s), 21 queries .

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