循环语句

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">8 m) _7 y& C* h
<ul>) c$ ^3 r/ o: K1 r" K- U
<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">
[- Y& G2 a2 R* G/ }: G& b( j
{{ value }}( a% l7 J4 n1 f. f% Z# G4 z; P, _5 i
</li>
) Q, p% b; c( P
</ul>
- b# k" S9 T8 ^9 u, G* A5 A
</div>* Z6 l, {6 w9 k3 E
: T+ K: f4 S7 n$ Q- p3 V7 Q2 x
<script>
; q# @$ B5 W2 a. F& E* j* w5 y
new Vue({5 @ [2 e2 o& {
el: '#app',
5 g2 Z2 x) n! l! n) | ]
data: {# s% W- k- N/ v
object: {+ Y' k5 a! _4 s) X- |2 r$ Y7 T/ z1 ^; I
name: '菜鸟教程',
% d T1 ^6 }8 N9 Z
url: 'http://www.runoob.com',
6 q; a* U% e1 v7 ~
slogan: '学的不仅是技术，更是梦想！'0 D, {5 x, X5 z5 R) c
}9 ^* \, [& G* _& E7 R! ^
}
; z0 O( e- P: A5 x6 ]
})
& W! Q0 s/ @0 a1 U
</script></div><div></div>