循环语句

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 S* S4 D0 n# a' [% J- N7 _- J4 s$ @ q
<ul>
) b) _- S; A B6 W/ F5 i! 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">$ }" q$ g+ U# W6 M0 ^- [! J8 H9 ^
{{ value }}
8 U5 k: b8 y) q6 R, f2 f( e. n
</li>
- Z3 A" @ J9 w% J/ L
</ul>
' A! D8 R: M/ r% x/ _2 V
</div>2 H6 Q: K6 j) T
: c8 G' a2 c& ^
<script>
0 R8 X, W- x6 F1 H3 Y* @1 x
new Vue({+ Z3 `( L/ T" P! Y: x3 M, A; B
el: '#app',
& j) I4 f) X. ]/ Z5 K
data: {
$ u$ o' `( Q- @& n" a
object: {
) c# o, {7 x& i/ }7 h, |: }+ M
name: '菜鸟教程',
* [. W0 ]/ S2 u. z
url: 'http://www.runoob.com',
; o& j0 Q' Q K" z( I
slogan: '学的不仅是技术，更是梦想！'
: \9 B% q( M) r& X- t1 a
}# G$ M, A& p. z7 B% _) ~- I
}6 `; } y9 C+ T. E" E1 [& v
})" @) J( |1 [3 g% B0 q. Q0 K1 M+ w
</script></div><div></div>