循环语句

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"> V7 s* T3 w6 Y& o2 _0 C* g7 k
<ul>
, [: {$ z* O, o' n) A* H
<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 ^+ B* E- ^; f8 }/ m6 \, O
{{ value }}
, b8 n& F3 [0 P
</li>5 C# Y5 C. G7 d* u
</ul>6 b! h9 a) r+ x" \+ [
</div>
) Y# X7 ^% Y' e( W8 R. i# F3 e
4 M; G4 q* e% z7 `) W- V( W6 B
<script>
+ N# x2 B3 k7 U3 k2 a9 i' i+ D
new Vue({
2 z* t% Z0 U: j3 f0 X$ N
el: '#app',7 w% y- ]0 A" O7 e
data: {
' L) n- ^+ b4 O* O O* z( U
object: {
+ d( B# ?4 S1 A% e3 @' B
name: '菜鸟教程',
4 R3 t% ^( i0 R
url: 'http://www.runoob.com',
- {$ ~; y* ]3 `9 G
slogan: '学的不仅是技术，更是梦想！'1 E" r6 T. ^2 V+ Y5 K
}
- o& s1 f, v* X7 q' k
}
( S- v2 x! Q% z( U8 v# L
})
2 q+ N- M: L2 P1 G x4 Y
</script></div><div></div>