循环语句

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">
1 i" m. i( h- y( M/ x8 V
<ul>$ ]$ W a+ L% q( B4 T% m, E" o' J
<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- l$ q5 T( ~/ X9 X3 J
{{ value }}
# w4 p( A6 M, G2 t% o J+ J
</li>
2 V. y* B( M0 l7 q' J7 e0 m0 ^
</ul>2 M9 G5 a: C& N# x
</div>
O! ^% L0 K& ]5 K
$ t3 x8 r0 i7 d9 H; I# R( p6 [7 ?
<script>
/ @; Z" B; }6 e) V
new Vue({0 c6 S) B# f* f/ H; F2 A+ H) A8 d
el: '#app',. {8 c& X d2 G' x8 Y" Y* T
data: {1 z5 q! ^' `1 ]2 m' \- j6 J
object: {/ d& n+ b( w9 }" I2 V. z7 K
name: '菜鸟教程',) u8 D) E4 w4 j1 t* k# Z; |
url: 'http://www.runoob.com',5 M! ?0 [- q" o- Z& _, @! T
slogan: '学的不仅是技术，更是梦想！'2 T8 J/ ~7 \. V6 H+ v
}
; t4 l8 I. |3 C+ B
} q1 @& [! j8 s0 G$ _, W
})
- g9 `+ {% b$ G
</script></div><div></div>