循环语句

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">
) U+ R* {: \3 E
<ul>
4 l. b: \0 m2 S1 _% O4 \/ Z
<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">
) X* W+ P7 T/ L+ m" |
{{ value }}8 T/ t, [3 b. b1 R
</li>
3 s" K0 }( R/ V2 L1 X
</ul> w* d! S$ L. `
</div>
/ N! L# X7 [: _: y3 W. l
7 l: u) x! F3 g3 i4 H
<script>
& n& I* R$ @) v+ V' f; m: A2 X+ o
new Vue({: O+ y" @. k, ?
el: '#app',2 c4 ^0 P3 M8 O/ y& ]
data: {2 D9 a/ K$ h) I
object: {0 r, N# Q( _, ?0 Z+ [. W
name: '菜鸟教程',9 |- \# j @* }: {6 f# A( y
url: 'http://www.runoob.com',
4 }9 j% g* C; f+ O7 Y6 ~
slogan: '学的不仅是技术，更是梦想！'
& i$ P/ C# k F3 ]! }( T% U4 I
}
4 t& G) t9 S2 V. e
}
/ d2 w* V/ h' d" M& {
})$ o1 v4 Q3 j3 i6 {5 K( H7 E
</script></div><div></div>