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

只需一步，快速开始

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

发新帖

查看: 11226|回复: 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 `. K& H7 H6 n0 r+ o& [; W
<ol>; |/ F- C H8 y
<li v-for="site in sites">
" o& o4 l/ r7 }, H* Q# T
{{ site.name }}
/ R$ q8 Z& ~/ Z3 R" C
</li>
/ Q) M2 R9 H1 I& F/ `/ X8 w
</ol>
" ?$ A5 g0 T! @
</div>
& r- i7 l; ^( u: [9 G& T3 Z+ u
: D j' @$ e; w8 M) i
<script>
& g2 t. _ _9 s( l$ `7 V; t a
new Vue({' W+ G! ^- T7 R2 I
el: '#app',4 @: R% U" g) R9 i9 v
data: {
t1 x8 Y, Y; q* F3 s0 @
sites: [
, f, F9 W& q2 f5 ~3 D, x$ \ W
{ name: 'Runoob' },
. @2 g/ y1 k3 g4 E: q) ^6 s
{ name: 'Google' },1 ^9 n0 Z" i8 w8 g) l
{ name: 'Taobao' }, V* L0 u1 a8 g' `9 e0 K2 L, [
]
6 T2 S) Y0 j6 W* |6 X5 W' I
}
3 p6 u5 D) o- j2 [7 K, l, d
})
5 i& q% o- h& X. e( f
</script>

复制代码

模板中使用 v-for：

v-for

<ul>
" n# f* t. E/ X8 A# |* I+ B, h
<template v-for="site in sites">
# H* u3 J" n/ m! m8 a3 Z9 h8 J
<li>{{ site.name }}</li>. M2 f8 T4 h A+ C
<li>--------------</li>
# n$ q& M( u- K- X' A% v5 S+ z
</template>
( B$ K* t ]9 ~ g' @. O/ g: O
</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;">2 {& B. m' G3 I: G+ F0 a# 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;">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;">
; b# \5 g4 [7 t2 P% 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;">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;">
9 A6 u9 z1 Y9 A8 E9 D
{{ value }}7 w4 g$ J! _/ C+ ~: 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;">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;">$ I$ q; b# s1 `' E' X0 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;">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;">) C9 d, r* b3 ^# |
</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;">
1 U A7 @* q% I- p: i) N. T
; t8 u& E' V/ t/ a# W7 p
</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;">
4 H7 _' S. x0 w
new Vue({& R0 M% u% f1 t: \( {
el: '#app'," O7 _, i* N0 p4 G$ R" z6 `
data: {$ d4 m" ]0 A! J1 |1 v& g! H
object: {( Z' M+ s2 c% u" G7 N8 K
name: '菜鸟教程',' d8 P8 \" w( L9 {3 u
url: 'http://www.runoob.com',
( T( O# a4 y+ ~" Z- f' A
slogan: '学的不仅是技术，更是梦想！'* U" U, g ^/ R- Z% \7 w" a+ j+ x7 w; m
}
! [2 \* l0 H+ [9 \5 i5 N6 i+ D8 F
}
7 z, G3 ?6 q" z( u
})# e4 n8 n9 R% H5 F1 i% d
</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">7 `4 W" ^- W# v
<ul>4 n8 k# |5 e4 i8 C: S+ d) g# X# c$ b
<li v-for="(value, key) in object">
+ q3 K2 J; K# e
{{ key }} : {{ value }}5 t3 X" R8 u! s- f; D( D2 U% u
</li>
7 u! {3 R" S! o2 G. k1 n0 {
</ul>- M7 B! V7 d5 G! D+ I
</div>

复制代码

第三个参数为索引：

v-for

<div id="app">& ]1 C1 H4 r, p8 L4 J+ j! f6 e4 E
<ul>
0 a; A% x5 w! Z" n- x
<li v-for="(value, key, index) in object">
5 A' p" V, L, {* U$ G, T
{{ index }}. {{ key }} : {{ value }}$ C% S$ @4 K5 H* a# A
</li>
0 a3 W2 B7 Y v& [+ J |
</ul>
: F5 X; j5 _9 J0 G+ R1 u' Y, T
</div>

复制代码

v-for 迭代整数

v-for 也可以循环整数

v-for

<div id="app">
9 i( {: {/ E( S$ T) P7 C0 M
<ul>
9 _4 X+ q3 a- q4 ]
<li v-for="n in 10">
6 b/ p: z! e; V* D1 C2 K
{{ n }}
! D+ K4 z# U* b. w& J
</li>
! y) h9 H! M8 ?! P
</ul>' J m9 X0 T7 {3 A
</div>

复制代码

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

收藏0 分享 支持0 反对0

回复

使用道具举报

发新帖

|

|

|

|

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

GMT+8, 2026-9-21 05:17 , Processed in 0.049848 second(s), 19 queries .

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