循环语句

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">
$ `: Y: n P1 Q
<ul>
- {" d- R% E0 e- ], y9 a4 N
<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">2 I: S' W1 ] X- a# [5 G# b
{{ value }} f1 f8 }/ m6 A a4 Z
</li>
/ Z5 @3 p8 \) |. u# b4 E* V
</ul>
8 d, w" i! F2 X. l: a) C3 T$ k- v
</div>7 z3 G4 S4 l9 E" A% O7 y! g
' ?) l: I: `! N2 E9 G4 x- Y
<script>7 @8 H! ?6 z6 z1 o2 ]0 N/ S
new Vue({
8 A, @/ U/ a* c. U
el: '#app',, \4 S7 j+ k5 k$ p2 S! ~
data: {
- V/ i. ~" h0 y" d5 q' I& d6 \
object: {
$ ] s6 G8 H$ B$ h/ H4 o
name: '菜鸟教程',
" M1 V" N) W k9 E6 o" z" g) R
url: 'http://www.runoob.com',
# _! H4 q% d( B/ f" p+ }9 Z
slogan: '学的不仅是技术，更是梦想！'
% r; A' J. Q3 h) a" }6 O& k
}
' ^( ~: W5 a9 _* j% B8 N* ^
}
' o- T$ N1 X) |' O w" _9 ]( H
})& {8 y1 s s8 r+ |
</script></div><div></div>