循环语句

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"># x. W/ r: {: p
<ul>
2 w+ u/ ~# b9 a0 V* }7 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"> k5 s6 A, R+ q. \3 N( H1 W4 @$ s
{{ value }}# |1 B Y7 {) s7 v( e
</li>; W* D1 S" s7 f/ p& g5 ~; X$ G& \0 |
</ul>( Z9 R: M- ?! ]% P0 s: a. ~
</div>
2 N0 v& J3 L' b( }
. r/ B; F2 U) f F/ b( p) i/ E
<script>! `0 p0 f- t# u: Q
new Vue({
/ D7 u( z8 ?7 {+ w* T
el: '#app',0 X) k* l4 k" m: T; \( [2 S* j% Y& Y
data: {$ d% K& J6 \4 d. c7 X
object: {
- Q. k+ E# C4 T$ ~' L& T
name: '菜鸟教程',3 `/ C1 S% |, ~0 @+ w
url: 'http://www.runoob.com',
* l# {9 o* m6 M) \) V: V& F
slogan: '学的不仅是技术，更是梦想！'
. a: w4 O' [' q2 r1 u# _$ w. G
}
, K- X, B, b! u: j/ X4 }
}
- k) A. f: N, L; h4 ~ q2 @, q
})
, m/ k, K- J% F; l* V* S/ d0 _# g
</script></div><div></div>