循环语句

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">- c, ?/ }. K- n# J+ v+ D& A
<ul>2 H; a- d- Q+ K+ [& e5 L3 L
<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">
- p" g, z' q0 f4 M/ o
{{ value }}
3 t0 @% a) E$ S1 |! `
</li>7 ^3 [, j& O" X/ o- P
</ul>
- t; v" n* N Z0 m% {1 J" K
</div>) D& s0 k+ j' e! Q5 C1 ]7 y- g& E
) v" `5 v* x+ r% l# ?% M( B
<script>& I7 U' H- |0 G3 h1 R- C! R! U, v
new Vue({: Q4 b7 k% ^; {/ p* n3 H
el: '#app'," ]# \, v6 K* B6 c4 C6 X
data: {! l: ` Y- i1 }% A' ?2 G
object: {
. M+ I- h& t {- J
name: '菜鸟教程',
. m1 g# c0 |& v- V) o* Y2 Y
url: 'http://www.runoob.com',
. J7 B. z, X4 l9 Z' ]
slogan: '学的不仅是技术，更是梦想！'( x/ }1 m1 t- j
}6 n: e& y" g6 T' j; u0 k
}) Y5 p+ y7 Q1 t
})
( k. e! J- _8 h* Q5 r \% s2 B
</script></div><div></div>