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

只需一步，快速开始

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

发新帖

查看: 9948|回复: 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">
1 \8 v& `7 C3 B% a- c" o9 x! C, r& s
<ol>
% v6 J& N: L8 P' t" I# U! t
<li v-for="site in sites">
$ a8 o* J' t$ C* y! V3 T! M- z
{{ site.name }}5 ?* K7 L* f* b2 Z* |' b& \1 {# o& Z
</li>3 w/ @* l+ F. X7 K$ u/ P
</ol>
5 G5 ~( P k; Q
</div># ~% e8 [1 v" }( h$ P% O
" K$ f8 G3 e5 M. S7 E$ J5 ^
<script>$ ~$ n$ @$ r. o0 U: Y4 ~" L
new Vue({
; G. M" G! y2 v6 E4 {# }: G
el: '#app',
% O6 A* N3 R6 K
data: {
- r; l: A5 E1 U2 e9 H7 v
sites: [- ?8 e: g* I' t/ ]* Z: l
{ name: 'Runoob' },
; z3 l# {& Z# B. l( P# f% E
{ name: 'Google' },
3 D- o5 z4 S% x! X. z/ s+ {
{ name: 'Taobao' }+ Z1 K+ O5 y2 Q2 g( U- O; q5 B, r0 x
]- d8 E* n$ r4 z) o
}! j+ B! G& A! b' l. W: x7 n; T: L
})) F6 b R' {' y- V8 K9 K) P" V1 v
</script>

复制代码

模板中使用 v-for：

v-for

<ul>
) }, k& x1 o( l: E- |8 y
<template v-for="site in sites">" R% W7 I. L# j7 X" e0 y& i
<li>{{ site.name }}</li>/ @/ S1 A) I$ d! b+ i
<li>--------------</li>) b7 e8 d) V+ s/ A J
</template>& g% \7 h0 r# u
</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;">
# N# ]3 c( t9 U8 S s. 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;">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;">3 G9 ^5 n# ~) m* H. n( j
</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;">/ \8 z* T4 ^5 E
{{ value }}
2 v) i) G3 i2 O/ f9 s4 |. 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# s+ R+ T! b% J. B8 b' l
</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;">
; [6 ~1 N3 r5 o% L6 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;">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;">
! m7 n9 m# d) N2 q* ?: Y
8 H+ _ R9 @9 ~1 M0 L
</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;"> x, ^ F' O$ V, F! k( Q
new Vue({3 m( B# n% c/ g2 F1 c1 X
el: '#app',7 d' b3 [- G& d4 t( I
data: {' T7 |6 ^, N3 ]3 A# _- k: @
object: {
0 E0 b! m9 ^/ X8 n8 G
name: '菜鸟教程',
4 ?) `0 _+ H' a3 d, i3 Q* t, U
url: 'http://www.runoob.com',: [6 | n7 Q/ ^3 O7 D) s0 }
slogan: '学的不仅是技术，更是梦想！'
9 G, @5 h5 [3 l' Y" J3 \ Q
}4 \* N4 \' A: C, J; h* R
}: \( M' ~4 ?1 U: `6 |* }; @6 _9 z
}) p; U$ o& c% C$ E! Y. x
</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">% ?1 ~& ?" N2 ~* [0 k7 i3 G
<ul>
: ?5 H/ ^# d0 ^3 _8 c4 J
<li v-for="(value, key) in object">
* u" q% S6 V) J/ H# y1 w: D
{{ key }} : {{ value }}
4 n/ \( l# }- H7 v, x
</li>7 `7 N9 l$ f& u0 ~8 r
</ul>
z: X2 ~8 U, v8 T+ W
</div>

复制代码

第三个参数为索引：

v-for

<div id="app">1 b1 y( c1 w1 v* i. g7 l1 Z
<ul>8 V7 R9 [& u) ~5 F7 b! r- r9 f& O
<li v-for="(value, key, index) in object">% i/ k, y% w! I% g5 X; y
{{ index }}. {{ key }} : {{ value }}
& H4 X6 H& N1 l+ i; T# h2 M
</li>
. p. \! }- Y3 g" \
</ul>
8 x0 a& x- X4 A# _6 u9 t0 O0 V. X
</div>

复制代码

v-for 迭代整数

v-for 也可以循环整数

v-for

<div id="app">
8 q8 s; k; `* Y. N" q" ~
<ul>/ D2 r7 ?0 T0 t! H
<li v-for="n in 10">" P* f$ l% ^, L# P1 [6 v2 b
{{ n }}3 G3 Y) w+ M- m# ?
</li>
, X+ }/ Z% R# `
</ul>9 O5 C1 Z3 {$ c, U, P
</div>

复制代码

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

收藏0 分享 支持0 反对0

回复

使用道具举报

发新帖

|

|

|

|

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

GMT+8, 2026-3-16 20:28 , Processed in 0.059173 second(s), 19 queries .

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