循环语句

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">, P) S# j6 c; X } R
<ul>! P h6 o: T0 C T/ o2 C5 M7 d
<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">
4 Z. c0 Y# ?8 E4 t3 i
{{ value }}
4 z* K$ s5 Y# o; h- A
</li>5 T8 v! x! E4 }+ A2 Y
</ul>
/ \/ a/ t4 _! A* d# f0 J
</div>
4 _7 x" N+ B3 w
D1 ]5 r; O: {7 K" a; V, S
<script>& l# e1 \+ p& u+ x' P
new Vue({$ D6 }7 J( z' Y4 y, o9 k. `) Y
el: '#app',4 c+ p! k! u8 f# U- f
data: {
: U2 p( D, v; K. d8 ^3 Q& D! _
object: {6 e* i" p( E: f" \
name: '菜鸟教程',% b/ W5 a4 b8 Y. F6 X+ c
url: 'http://www.runoob.com',: k5 P6 B U7 Z! j8 m2 t/ k
slogan: '学的不仅是技术，更是梦想！'
2 O1 G# @0 @% M w; t, c9 x
}$ V! Q# j5 J$ i! U0 A! k Q# P- L
}2 R1 U( D3 @" N% u: L8 g# @
})! G1 O! g0 K# Z( H; |& H
</script></div><div></div>