循环语句

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">$ ~5 k1 J3 N" v1 j% [' K5 U
<ul>8 g/ ^, q6 ?' n, a
<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">
- H2 ~# u* _2 r
{{ value }}$ [+ f4 a K2 _) [& s
</li>
) {. }0 O0 Z- `' [0 k. e
</ul>; }! e# {: p4 p9 [
</div>+ O- V# p, U4 \/ W6 I7 `) B" E1 ~, K
8 g. {& l# j: U1 n$ [ p
<script>
& z0 E3 s3 x- K
new Vue({* m" a1 L9 H0 @3 M8 F2 F8 E
el: '#app',, I* G. c, B0 q, B V
data: {
5 U% _6 ~( e& m$ q1 Z
object: {
3 ^$ v9 x2 b9 W: R
name: '菜鸟教程',0 T, D; \* E$ t+ i; J; P: ?
url: 'http://www.runoob.com',- D" Y, w8 P% Q
slogan: '学的不仅是技术，更是梦想！'5 s" B, ~; f2 r! a" E
}# _1 h* M/ g# Q3 j: P
}
1 T/ M* t+ ]1 W/ t( _0 q
})
3 O8 O( E Q: A1 }: \8 I' _
</script></div><div></div>