循环语句

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">. ~ C6 z1 f5 i$ k. Q
<ul>
) h7 F# F3 l9 u3 r1 A4 e K
<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">1 O2 B h+ L9 f* C& e2 T
{{ value }}/ z& K3 E" w1 _. c o
</li>" A' l' x8 `6 A @4 S6 p, Z% N3 W
</ul>
" a# Y G4 i/ I5 u/ Y
</div>/ Y7 l" m" i( A+ G
9 f' D$ p( A) \! w
<script>" G. k- W) }. G# e& R3 D0 j
new Vue({9 S( R. S/ a, X5 G5 J
el: '#app',
. @ B9 `, E! \; j5 i
data: {# E, m' s2 M5 a) E& d
object: {
' ?6 j; O% ?" g) u4 U) L# ~. n
name: '菜鸟教程',
: Z- V: b- b% q0 \+ U9 X- [) C1 H
url: 'http://www.runoob.com',! ?2 u; M3 l2 W
slogan: '学的不仅是技术，更是梦想！'+ v% o W& W, I9 w* U4 r! V8 x6 w1 W
} r+ e6 w4 I9 Q. b1 [% e
}" ~7 d' l# Z0 c ?9 L0 {
})0 e* k- \8 U, T- X" m5 v) A
</script></div><div></div>