循环语句

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">
% k0 I9 U4 y8 L( m2 S2 q
<ul>. k& ]- I; [; d* Q7 J6 k* g
<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">
! U8 m N" ^$ i; I5 W
{{ value }}. q" k0 D; W. b1 \
</li>
! i* _3 G+ @4 I c: t- T( A
</ul>
7 q* Z" D6 r3 G H) ]
</div>; i6 v5 K- {' b5 l- P
# S" c; t' ?. ~
<script>% m/ I+ O8 q) L9 o' t3 R
new Vue({
+ R, L7 u5 O' R* t# {8 @* E
el: '#app',
. f" i+ w& p8 P
data: {9 V7 d& I5 l4 ^9 X3 j
object: { x: ~- p* t% `- R3 L0 W- w6 C
name: '菜鸟教程'," X l: l. X# @4 P& \
url: 'http://www.runoob.com',, N3 |" C1 ]/ U' |
slogan: '学的不仅是技术，更是梦想！'
, p, s% d' ]/ ~& M' P
}, |( E T+ h. W, ^6 N! v0 _* _
}
$ z" A* a+ O4 t6 i4 d. B: ?
})/ M3 s b$ E& @9 K
</script></div><div></div>