循环语句

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">- v# S& s- B8 Z
<ul>& k2 v* R* v: }: q1 Z; c
<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">
; n/ G% H% a* H% P' A. p% a
{{ value }}
, s8 L3 j4 N+ C1 X
</li>$ q* q4 q' K% F. x
</ul>
! a+ G: s0 o5 s( P. ~0 ?
</div>/ T2 B2 d! K1 ^8 @% h5 I, A
4 B; p! P0 l& J/ E: H' P
<script>' n( D8 Q( u4 X; M' m8 j* \
new Vue({: ^+ K# p, s; R: L
el: '#app',
# E6 \8 z7 D: c% {; Y5 ` |
data: {
3 Y* D/ L D M$ N* @
object: {
( E0 S1 J6 b6 ^5 q: D
name: '菜鸟教程',
2 K+ o: ]& W& x, a
url: 'http://www.runoob.com',
% P* `) T- l. u; V
slogan: '学的不仅是技术，更是梦想！') J) P. `/ e* ~6 A% |8 w. u/ a
}
/ m8 s0 M* u& \; h# _" }3 @+ C- [& C
}
+ E g7 U h! A7 ], p0 {
})
% T- K, {' X6 M. b$ \8 j( z
</script></div><div></div>