循环语句

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">3 {5 ]5 W# A" y; K6 S' W
<ul>$ }7 W5 ?+ M: p# u4 r
<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">$ a4 E" J$ A, m' h4 A
{{ value }}
e6 g4 \+ \. I; x+ h' N" f; g
</li>
0 u( }# ~8 w$ u1 m. ?+ X$ E
</ul># d' i5 c" K8 q6 a9 A. @0 J2 K
</div>
* C: N* \' r, Y( P2 m% A9 n2 p5 l
4 w7 u. a: {/ d1 h9 b; z' k
<script>; Q- C/ p' o/ y& E( O
new Vue({/ f* j" E5 H. {" z* Q6 A
el: '#app',* v. b/ S& a& S1 T% F8 V
data: {
2 ?; z% V, A, {0 Z: R7 P: c n2 X0 f
object: {8 j3 D8 `$ I% O) m% O2 O
name: '菜鸟教程',
' o' w! J, j! R9 m7 L, w* [
url: 'http://www.runoob.com',4 u' [3 a' n* n( ?8 s" n
slogan: '学的不仅是技术，更是梦想！'6 D3 L8 v: X& f2 `: k
}
% ]7 q! N4 [) l
}
9 ?; |/ s, _4 N8 o2 P4 S, r' o
})" h& S: h, T/ j* D5 u1 X! i
</script></div><div></div>