循环语句

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">. b4 Z" T+ H! |( a4 R
<ul>
* v2 d! N, X2 A/ {3 w
<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">7 B0 D) \) u7 N) \% w: p
{{ value }}! n7 r8 g( \$ l, W' S) S
</li>
9 ]# r* R1 T* _# O! g
</ul>
: ~- S! D% H" h. ~' Q) Y8 [
</div>8 I' c! r# j! C2 i) Y
1 J6 k, |, |+ R# g% M1 N* t4 z
<script>: b6 L; e8 @) b
new Vue({
( C3 g9 m, J4 [
el: '#app',
x$ Q- C4 J) v1 D
data: {5 A6 }4 {! q* |; X% V( N
object: {) D* C+ q# f' T, } u6 b
name: '菜鸟教程',% ^! Q5 G* |! G4 f$ g
url: 'http://www.runoob.com',& f7 h( l' h( s- ` D
slogan: '学的不仅是技术，更是梦想！'
! `: b. A* o2 a
}
4 c$ f( N7 l& ~8 S3 f0 h ]% H
}+ i2 W, t3 |- t# Y2 G
})
( r& V" p% o9 A7 O% ]
</script></div><div></div>