循环语句

admin · 发表于 2018-7-4 10:56:27

循环使用 v-for 指令。

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

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

v-for 指令

复制代码

模板中使用 v-for：

v-for

复制代码

v-for 迭代对象

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

v-for

<div><div id="<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">
: s. U- N$ y; `. g
<ul>
' t0 T4 v4 f+ e1 x8 B t+ y* \
<li v-for="<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">
, E2 B" G9 n+ |% ?7 u7 i
{{ value }}
, V3 F8 z) p/ a/ A! K
</li>
; A u6 z9 A& P% t/ U% a0 B: p
</ul>1 X6 B- Y) H% T1 |- K% @4 T
</div>
2 C U% Z* c C* d, i
9 D8 {4 X- ^- ~8 k+ I, N" z
<script>* S3 J1 G8 d- Y2 F% v% q
new Vue({
0 Z( d# N) D: Z6 J" ^: B, r
el: '#app',2 C% z9 E* k5 c* ?
data: {
% [1 A% _6 r) }! J' i$ }
object: {
8 q+ q6 Y3 O$ q4 d# ^
name: '菜鸟教程',9 d2 }9 u! c" k7 e+ n7 S6 k
url: 'http://www.runoob.com',7 `9 R4 Z0 d. p; h
slogan: '学的不仅是技术，更是梦想！'' ~! V/ x7 F4 }% M( B- \+ {
}4 y5 g6 v7 E& i
}8 i+ Y9 z( b% ]* }9 ]
})% a: j5 T [% y
</script></div><div></div>

复制代码

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

v-for

复制代码

第三个参数为索引：

v-for

<div id="app">
6 o/ {& c& t3 t. B5 h- f
<ul>
# X, O3 M& t1 J; }9 y; |3 F
<li v-for="(value, key, index) in object">& m9 F/ ^: d; y- m& v$ _7 f& w# k) S( v& s1 S
{{ index }}. {{ key }} : {{ value }}; P( D% N* V8 h, u0 \$ p: m
</li>
0 v5 R/ i9 N5 y3 f. L$ D
</ul> r0 h; f6 L3 `; }8 z
</div>

复制代码

v-for 迭代整数

v-for 也可以循环整数

v-for

复制代码

帐号		自动登录	找回密码
密码			立即注册

[Vue.js] 循环语句