循环语句

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"># N6 q0 {, [2 o2 h& T4 q
<ul>
: B4 u5 u0 V; 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"> h- l4 y; D1 D1 ^
{{ value }} |) Y& [5 P) w5 ?6 q# t* _& Y' ]" e
</li>
% f5 e5 c, q- A" B- j( K7 w( h1 C0 l5 b
</ul>, P1 `& ]- ? m: {
</div>
7 G7 j6 l# L& q
# A; c7 s( f* Q2 Z2 A5 v7 }7 t
<script>/ Z: ~ A0 D5 [/ s. A- G
new Vue({+ y7 ~# I. y f. _* E: l3 @
el: '#app',& x" b6 A8 A) a8 e9 W; [; ?/ \
data: {4 @ {" `! z7 N1 |/ T4 f' G
object: {; |- Z" U* F U+ p+ g4 O
name: '菜鸟教程',, F g! J$ b3 A
url: 'http://www.runoob.com',
# B, D+ F; o+ Q, r- t. Q
slogan: '学的不仅是技术，更是梦想！'9 J8 [0 K; t" x8 Z2 [
}
! N( G' ]! G1 S" f; S+ q J
}
5 k) `- o$ z3 K8 ^, X O% E$ `
})0 i/ x* N( K" ^
</script></div><div></div>