循环语句

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">
% c- ?9 p" ^" c5 g' x
<ul>
5 i( m* V8 W4 T, |3 Z! G- g6 Q
<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">
: x1 ]6 F- R( D! m, ]
{{ value }}0 D- L) M, s( a* A+ J9 Q
</li>% \" p) D& P9 n1 V4 Y! ^7 @
</ul>
: Q. j/ S p! {; h
</div>& G' U4 t& ^' v/ {1 V( J
2 B/ U O5 {$ ?( o
<script>
- Z% s) n+ @6 ?) x7 v* O; f% T
new Vue({
7 R0 p0 L0 q3 P
el: '#app',7 _! b5 u8 \/ W# z# {
data: {* l J& m9 l7 z
object: {
' H/ n: N8 P* ~1 @4 B
name: '菜鸟教程',
$ G; O% }/ J6 l, J# G0 Y7 ^
url: 'http://www.runoob.com',& P7 l' `& V9 F c) Y4 B1 [
slogan: '学的不仅是技术，更是梦想！'
; J5 k* P$ l% c: _3 ]# Z
}
3 A7 B$ |; l, @! x
}( V _- M- G- f& N' B- e- q
})( R g. C7 ^' F& u/ T, y2 n
</script></div><div></div>