循环语句

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">
+ H- I. G( k0 _# [9 d
<ul>/ R5 F. H. S8 Q2 l# a* H' Z
<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">' N+ | s4 o! i& i8 V
{{ value }}
" a) {1 k5 j: ]* m
</li>
0 W; N% O: u8 ^% P
</ul>, k# ?9 H' N) A9 Q
</div>0 z9 C! D# @1 u* v( c, o
; C( `! R4 {2 ^' [8 r" k1 m
<script>2 n0 b% s. k% D6 L4 [, K+ Y. D
new Vue({
' Y5 ?2 e" C' @3 U2 B" c$ \, D2 @* L
el: '#app',
# a! a( S3 i& B
data: {7 w8 L- Z @ Y4 O- m
object: { F- I3 \9 G# a. I3 {9 V2 K& P
name: '菜鸟教程',
( x; W I" K; I9 E$ n, z1 ~2 I0 U
url: 'http://www.runoob.com',, ~1 {' m& x t6 `0 m) F" N
slogan: '学的不仅是技术，更是梦想！'( B. w) v0 |. Y
}4 O1 X8 o7 R+ D5 _( ?- O2 z! T
}3 {9 {* a, O/ {+ |. @$ ~* B
})
# F) L6 ?' i$ U/ Z- ]5 \; `
</script></div><div></div>