循环语句

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">
2 p j0 A9 ^$ h! G
<ul>
2 q- d2 R+ E5 t4 b: X* p
<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">; I5 f+ T" k0 e2 O
{{ value }}0 n+ i* s. O" L! q3 c0 H" l
</li>
( T+ f& U7 m$ s
</ul>- V- X5 y. u. [4 ~/ e
</div>
2 }7 e# C1 a+ P8 q" \% A7 H- a
+ t0 l6 f9 E! ^$ k2 b
<script>/ |; L' G+ U$ ~5 r6 t/ s5 j. z
new Vue({
! N9 j" ^1 M8 v9 G9 o
el: '#app',4 W R% I# H4 P& B9 e) |" K
data: {
8 M" s+ _+ _ e# i5 p* |% e
object: {
4 @0 \# l2 e" ]& |( U/ F6 t1 @
name: '菜鸟教程',% }) o$ L8 R( Y& k
url: 'http://www.runoob.com',! \7 h8 N$ P- S; B1 j2 H8 g
slogan: '学的不仅是技术，更是梦想！'8 \9 g* c; R. R8 O7 k: y* F/ b% I
}
2 K Z2 R, @+ j0 s1 t* j4 Q1 b
}
6 i% F! ]1 J& P" f& N7 ], @
})6 y: A- }- ^) r* n
</script></div><div></div>