循环语句

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">
" D- m+ k, {) w8 i- r' y, f- ~
<ul>2 V3 g D$ X/ X
<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">: E& W7 d$ u) W
{{ value }}
3 ?+ d2 W( } X$ T2 |+ L
</li>
3 r0 A2 a: w' h( w- j7 ]# `4 C8 P
</ul>1 l N# V2 A i6 E, f
</div>
) m: _/ j# K" |+ |+ K* a8 `
2 a3 S1 C0 v- D, Z( s
<script>
+ m* j" T# s: P& y
new Vue({
$ {- L2 o2 i h5 M
el: '#app',& _9 z$ n( Z9 F/ y0 F5 L0 Y
data: {1 I, N4 L: x. F! u+ F& ^
object: {7 q/ [7 p" L* U Y+ K
name: '菜鸟教程',, Q, b0 I9 X# B; r
url: 'http://www.runoob.com',# ]" @( |& X. ]% [, Z1 J1 \# C1 J! i8 X
slogan: '学的不仅是技术，更是梦想！'! \( b8 S& I D3 I8 t4 z# F0 E) G1 S+ t
}& x( U' j7 `+ A' J8 ]/ n5 d
}& Y; i0 c- G4 G u( l5 ?: L
})8 E( U H# ^2 X
</script></div><div></div>