循环语句

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">; p9 @1 z" O) m7 z) b
<ul>
! `! K* T" ~& b1 A7 o
<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">- ^& h! u v( Y" q: I) ?, T
{{ value }}
: [) ~9 @ f: _* a- g7 {; P% u2 W0 j
</li>
6 S) [* i; D- {' [) g
</ul>3 ?; q! C4 s4 I+ G! U
</div>
0 _5 g* S! `3 h/ M: L% g7 h
1 A1 I6 E: x3 y0 d
<script>' x; d$ d" @' d) s1 E4 X8 Q+ i; ~
new Vue({6 n% t: j5 }: V' i. f/ S
el: '#app',& q9 r( u+ _+ c4 F, S
data: {( n8 r. P5 O ~: W# @5 H
object: {
! p4 N/ A$ H, F- A- o# x) _ v
name: '菜鸟教程',
. v2 M% E4 P) x7 l, n- v- I; ~
url: 'http://www.runoob.com',
1 q9 m( ]* ?% ~- Z. }# S+ R
slogan: '学的不仅是技术，更是梦想！'
4 h6 x1 d4 k- b! ?0 U1 z
}' x: [' u& l( i# X
}
0 q) i9 K* M* ]7 n1 {* M1 l% D
})
' N% K5 W& V1 X+ [$ b4 A4 v
</script></div><div></div>