循环语句

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">2 G( d0 ^2 ?0 g& \, L7 h
<ul>
( b! |1 p3 s0 ]9 I" i( F
<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">
9 D6 P" a2 L1 A: o5 _) b$ X# c/ j3 S6 W
{{ value }}
% W% O# s% f) q C. ~
</li>" q! [+ r8 q# k) Q) R
</ul>5 J3 b4 y0 ^0 n
</div>$ O6 b8 p# j; M2 S1 d( V- ]
) Y6 @8 n: `7 h& ~$ H! _
<script>
9 V6 _( ]3 s; V; W
new Vue({- Y8 ], X$ Y2 _- F, P x% z
el: '#app',- w+ M( ]6 y* _7 v1 d
data: {
}6 h' B& t- U( ]5 t ?: n
object: {
R6 [: B' a* `- F! K" `
name: '菜鸟教程',
8 `0 A; B1 N& J/ _
url: 'http://www.runoob.com',6 R3 S2 S. A; q0 g, W' `+ N+ X
slogan: '学的不仅是技术，更是梦想！'7 e9 X1 \. h# t
}
9 K- |2 J) q* v6 a
}
V2 l* O- e* y1 H5 @ n3 H
})" e; k; [ l8 F" t8 s% C: S7 ^
</script></div><div></div>