循环语句

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">( {4 ?# V9 M; a* c+ z$ ?4 E
<ul>/ _6 B2 S( @0 J6 j2 r0 k4 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">
( U! g& {- l. i& c- \% A
{{ value }}
) K; \& Z7 c# D3 j1 ^! C
</li>
- \) k. a; g8 {! S+ q" q* U' H' T0 c
</ul> c$ ^8 E. ~* P+ ]6 A; N
</div>
. S& R( Y+ P2 l# |0 `
+ c3 B* _8 o+ x
<script>
- }3 W6 b4 X8 B
new Vue({9 X$ R) g9 e+ t( e) e z& i
el: '#app',
: f) V+ _7 K% D ?0 F: E
data: {
. _6 S5 ^# h, o8 i9 j5 f. z9 L+ v
object: {
3 f' z1 s: u3 a9 @% u* Z# I
name: '菜鸟教程',
* F3 a* g! |0 y0 }: G* C
url: 'http://www.runoob.com',
( E+ T; H1 T" E( i/ r, W
slogan: '学的不仅是技术，更是梦想！'
5 d) ? p- ]; K& j7 P) U
}
5 X7 E* ~* m* A+ v7 S# l
}; ^ Q+ ]- A2 g+ Q
})+ Z0 U/ Z+ u$ D- v
</script></div><div></div>