循环语句

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$ i* Q$ S% Z" v( y: H
<ul>4 o2 D6 K9 ]2 h6 K" v
<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">
: X$ s0 c9 ]8 h* _& F/ m
{{ value }}% J1 E& a0 A U ]$ E$ i
</li>- Z5 }/ C7 }4 |
</ul>9 C/ o. q* i0 Q9 _
</div>
& H& p* N, g5 s$ f- p% b( q7 x( E
; W0 s8 ~% Q! U1 Q$ j
<script>' g4 R- i2 j0 l( f3 H" w3 ]) I t
new Vue({
6 Q$ f" N6 ^( b7 l( n
el: '#app',' ~! j) w9 c7 T1 M9 U. C( {3 X4 b
data: {
$ d: c7 o! k/ q& m5 r* n
object: {
, f" o1 ? y4 `
name: '菜鸟教程',
% W6 d9 t% Y, e$ N
url: 'http://www.runoob.com',
# w% d$ \/ W; L
slogan: '学的不仅是技术，更是梦想！'& \, U5 I G- @3 K' u0 Z/ d
}
4 e8 G5 P1 p) h9 _) c' I: |, w
}6 t1 Y) A7 u _
})7 p! a. B6 X% [0 _$ C: ~
</script></div><div></div>

复制代码

你也可以提供第二个的参数为键名：

v-for

复制代码

第三个参数为索引：

v-for

<div id="app"># `' ~7 S- d; W. W, G" C _5 z: m
<ul>/ D8 n7 t0 G! B \9 n9 o
<li v-for="(value, key, index) in object">! a' _3 o8 k7 x3 T6 d6 r% A3 @: W/ L0 o
{{ index }}. {{ key }} : {{ value }}* t' I& u: C S6 s8 G( s
</li>
& r" \, B7 n3 d; ^! {9 v, }
</ul>* \: D7 f" Q7 L J0 Q' o4 k- ?
</div>

复制代码

v-for 迭代整数

v-for 也可以循环整数

v-for

复制代码

帐号		自动登录	找回密码
密码			立即注册

[Vue.js] 循环语句