循环语句

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">! e: R0 W+ x1 B( U
<ul>0 S) G g) A0 C8 c8 k5 D2 x
<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">
+ I0 m: \: ~! G1 r9 q! F
{{ value }}) P9 C& M, g/ x1 `" ?7 P
</li>7 V5 p& u9 x) n: H* b+ E/ J
</ul>. L. V9 Z6 B6 X7 r# _
</div>" L& t J' a! n3 F9 J, A
1 v5 D3 M& [) d! P1 a% i1 c
<script>) c! @6 d* d! t) `
new Vue({) c3 G$ H- I( G6 }# P( b/ I, w
el: '#app',8 R m% K% d; d
data: {
+ i" H) k! F% J" p
object: {
% }+ h E/ U& Z2 N% Y, z
name: '菜鸟教程',
1 J- `1 s' P3 }) l
url: 'http://www.runoob.com',0 M! ?% A; k3 @; W1 B/ g
slogan: '学的不仅是技术，更是梦想！'
; S: m/ @( R& }* }
}
}( `& I5 m( |4 Z1 h4 P4 o
})" n% y- B, Q9 X. b' `
</script></div><div></div>