循环语句

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">
% w G d# I# }6 W5 S) o; m" ?
<ul>
; A! d& m+ d6 a" Y' ]6 q
<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">+ m8 J2 K, H0 v5 F/ K
{{ value }}2 S9 \0 L( E4 u
</li>
" O6 d" Y3 {1 k W4 i
</ul>
0 ^6 Q) _" G3 R) O- Q$ T; ~) o" w
</div>
2 ?9 l; Z- c) q4 R; Z) R
G$ P; u- x* ^5 l& J0 \
<script># t8 G+ A d3 J i0 W
new Vue({' M; h7 K' k. v i1 B
el: '#app',
, h" P$ _& m9 v, B' z
data: {
* N/ H; w9 v8 e0 ~. l
object: {
6 S! A0 t; S2 n) e& E
name: '菜鸟教程',+ B' ]& y7 w8 Q7 p2 s( G. I
url: 'http://www.runoob.com',
! l7 a& _( C6 [
slogan: '学的不仅是技术，更是梦想！'3 L5 l' F" u5 p6 y
}- X. ]7 @' ]" p$ |3 `: S
}, U/ P2 j4 S+ A
})# N1 @8 s* I2 P. ?$ d! R
</script></div><div></div>