循环语句

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"># U! O% u+ `* N+ R- {' G
<ul>! ?& W3 M$ W3 n
<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">) a' ` a2 I( T/ G1 ]
{{ value }}: r* \+ @# w- d
</li>5 S. ]8 {9 { g9 g/ g B1 {4 E. V
</ul>
( g& ~# W1 T3 d# q# i
</div>
, T: n- X1 f& Z! ^0 a: ?2 Z
, m4 F3 A5 D( Q1 V( A2 E
<script>' B5 ?: }: H' x; g+ d% X
new Vue({& T# j9 O% A" g/ ?3 v* }
el: '#app',4 \ W5 O' ^# Z: Q4 I# D
data: {* L$ h" b5 p9 B7 ?. g
object: {
2 ~2 O& y) }# z& B2 E2 I
name: '菜鸟教程',
4 I) D0 L0 X8 Z7 t% Q
url: 'http://www.runoob.com',
3 n; R7 D$ \" f# k3 D# u
slogan: '学的不仅是技术，更是梦想！'
- K+ J, W p/ i% t# u1 y% }
}
: _9 f. h7 z" T
}
! p: [6 @. p* @' u
})0 f; G; P8 I; k, X0 T- S1 p
</script></div><div></div>