循环语句

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">
( ^) }: y! ^) c8 Y
<ul>
) q. F& a: Q( Z6 L* |% V8 _
<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">
0 i! \* e- h l" ?
{{ value }}
, V) A: K# k/ h, h0 [
</li>
2 p* P6 I0 o( d/ q; z# o s2 I
</ul>% [/ L6 t0 c1 ]4 b# d, n: L
</div>) E3 R1 X4 M. i1 Q4 R; O2 m
" }: k/ |) b4 X( u
<script>3 d" f# l: w$ T6 T# x
new Vue({% m7 d3 N* O2 @8 T) b0 }
el: '#app',/ K1 h3 k [- N4 e8 M
data: {
3 D! k$ w( |+ X
object: {4 S& J+ X( O. ^ r
name: '菜鸟教程',
/ C; T; X! @/ X$ C8 R# x+ f
url: 'http://www.runoob.com',0 A7 k$ Y6 _. r' j; O( d
slogan: '学的不仅是技术，更是梦想！'
( Y' I6 G4 Z2 W# R3 s
}- \) ?2 z }1 Q9 Z$ I8 D. z
}' q. ?9 e+ }6 m8 e9 k1 G5 g
})9 b+ S' D1 i, U/ @: C
</script></div><div></div>