循环语句

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">
% G3 `- H7 Z; ], N
<ul>/ p* u5 C. A4 a; I! b: G: a0 I$ N9 q }
<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">
Y: ]. Y1 M9 K9 L6 ^
{{ value }}& e1 Y* `. \2 r/ h' |; D8 ]4 }2 u
</li>
5 g9 B" {9 K/ U5 }# m
</ul>2 C Z; r7 V' [! y1 r* q
</div>9 j B8 p' ^- W' T
1 m: {% b/ L; w- s/ F
<script>7 Y8 k+ z( T2 ?
new Vue({+ P+ |$ _, y* U" v& D
el: '#app',
* i$ e- f' R$ d C) Q
data: {1 }) m: w$ F( r/ w- M
object: {- q4 |" z% t2 d0 J. z+ T j
name: '菜鸟教程',- d- d4 T; @1 v A: s7 M
url: 'http://www.runoob.com', p$ a& b w7 a& w
slogan: '学的不仅是技术，更是梦想！'& g0 c2 c# s. M% F8 K
}
+ n3 B: {- \4 ^
}
5 M/ @1 A! i+ Q
})& w8 p1 a! c4 O, c7 {& g. q( I" H
</script></div><div></div>