循环语句

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- }9 z* _6 y' r8 p* b3 Y1 G
<ul>
^8 d. Y' d$ B0 J& ]( R' P3 f% I
<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">
! o0 U1 @% g2 s- U' T2 v6 x
{{ value }}- j7 S) L! `6 ~1 {: x, l F
</li>
9 t# O% D, ], z4 T
</ul>: g) w9 q9 \8 A! ?
</div>3 |5 ]- h4 [' g7 ]7 e! I
9 ^6 N3 {3 a% a U, ^
<script>
. q5 T; n* p! W, G+ M( b
new Vue({
, i# z h# x5 b: ?3 Q' w- [
el: '#app',
: Z! j S: r$ c& E4 j/ `9 R
data: {
4 C1 u9 u- B3 q2 W7 P; r6 R+ I
object: {# i. d: }% b3 U
name: '菜鸟教程',
! ~5 T) b: N5 U! O. x
url: 'http://www.runoob.com',
; {& K0 e4 i1 M
slogan: '学的不仅是技术，更是梦想！', F( x0 @* Q9 [
}4 g( b5 o! I7 l3 L6 Y' t' }
}& `7 s% ? E' w+ o9 H0 j/ f
})1 n9 J# r! ~' p3 z
</script></div><div></div>