管理员
论坛积分
分
威望 点
贡献值 个
金币 枚
|
|
循环使用 v-for 指令。 v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。 v-for 可以绑定数据到数组来渲染一个列表： v-for 指令
( L! i$ B6 E8 S! L- <div id="app">" n! c6 w% ?3 M/ o- M5 f
- <ol>5 y. ]/ x) p) d
- <li v-for="site in sites">5 X/ }. n* R! P3 ~0 E
- {{ site.name }}
@( p( X1 L% H - </li>
: A5 l+ v/ w; |; y$ a2 u) G' o - </ol>
4 a7 t$ G3 b; y9 h - </div>
2 @! S, z# }$ L: X - / V0 v3 w* k# n6 r. R& w
- <script>
' g% @- n! \ J; F3 @ - new Vue({; u+ V g, o% I1 q& E# i3 l) E6 y
- el: '#app',
* Y H0 \( M" n; o% h* Q6 o - data: {1 k2 Q. ^# h0 F6 P4 m
- sites: [
3 R: @7 r* w$ R4 S9 { - { name: 'Runoob' },
; |4 U5 {5 a+ P% L - { name: 'Google' },
) S* C+ j" ^5 `/ k3 h - { name: 'Taobao' }
' L! X5 H! }; a: Y2 m' Q - ]
8 [. p. C. j6 H, a% F1 Y9 r9 _ - }
9 c4 X# z7 z# q0 u$ I! x' h - }). W: a; F& G- F+ W: R
- </script>
9 S$ \6 L K" o模板中使用 v-for： v-for( \4 f: t- f* L/ ]) _
- <ul>
. ?3 j/ F" p( G4 [: l! B$ a; j6 R - <template v-for="site in sites">
; J' O- I4 P* z# r# J3 L$ G0 ?; G - <li>{{ site.name }}</li>
, }8 k! B2 u) z" P; G - <li>--------------</li>
) G- V2 r- F7 @ - </template>, @( f4 u: _6 H+ h
- </ul>
v-for 可以通过一个对象的属性来迭代数据： v-for
8 @ L9 w. [) d0 g- <div><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;"><</span><span class="hl-reserved" style="border: 0px; color: green; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">div</span><span class="hl-code" style="border: 0px; color: gray; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;"> </span><span class="hl-var" style="border: 0px; color: rgb(0, 0, 139); font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">id</span><span class="hl-code" style="border: 0px; color: gray; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">=</span><span class="hl-quotes" style="border: 0px; color: rgb(139, 0, 0); font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">"</span><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</span><span class="hl-quotes" style="border: 0px; color: rgb(139, 0, 0); font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">"</span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">></span><span class="hl-code" style="border: 0px; color: gray; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">
7 L* J+ P d1 y- t* \! C - </span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;"><</span><span class="hl-reserved" style="border: 0px; color: green; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">ul</span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">></span><span class="hl-code" style="border: 0px; color: gray; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">
. @+ N7 O) n5 w0 _1 x - </span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;"><</span><span class="hl-reserved" style="border: 0px; color: green; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">li</span><span class="hl-code" style="border: 0px; color: gray; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;"> </span><span class="hl-var" style="border: 0px; color: rgb(0, 0, 139); font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">v-for</span><span class="hl-code" style="border: 0px; color: gray; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">=</span><span class="hl-quotes" style="border: 0px; color: rgb(139, 0, 0); font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">"</span><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</span><span class="hl-quotes" style="border: 0px; color: rgb(139, 0, 0); font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">"</span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">></span><span class="hl-code" style="border: 0px; color: gray; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">8 _7 a9 G" r% h2 v
- {{ value }}+ L4 t6 p# @8 V6 ~5 O" O d
- </span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;"></</span><span class="hl-reserved" style="border: 0px; color: green; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">li</span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">></span><span class="hl-code" style="border: 0px; color: gray; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">
n5 ]: W) g7 _& f+ h - </span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;"></</span><span class="hl-reserved" style="border: 0px; color: green; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">ul</span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">></span><span class="hl-code" style="border: 0px; color: gray; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">
8 b& T- |& ?- c+ K x) O/ { - </span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;"></</span><span class="hl-reserved" style="border: 0px; color: green; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">div</span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">></span><span class="hl-code" style="border: 0px; color: gray; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">
7 b2 B) Y8 l5 Y( u. I - 3 l, t; q9 Q7 E u I$ J1 g( \
- </span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;"><</span><span class="hl-reserved" style="border: 0px; color: green; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">script</span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">></span><span class="hl-code" style="border: 0px; color: gray; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">9 c+ ^1 i- C: x
- new Vue({
% N: r0 v- w4 d1 g2 P! P - el: '#app',+ S* n3 T/ X. b$ G( i8 X
- data: {
. j! Q4 U% ^- V" ]9 }9 I; k - object: {
+ ^. W3 J" o) w. X9 \5 n - name: '菜鸟教程',
$ c# l, O! b" o, |5 c( Y4 ]3 H - url: 'http://www.runoob.com',
; E- z; ?& @ W% `: |: ? Y$ ^ - slogan: '学的不仅是技术，更是梦想！', ]% d' V7 C. [" u4 z: w! B
- }
: Q/ |3 W' }2 G1 o5 O9 I& i - }" U2 {) l" W3 D, b
- })
O0 R4 C: K) B s( h, O( X1 t - </span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;"></</span><span class="hl-reserved" style="border: 0px; color: green; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">script</span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">></span></div><div></div>
你也可以提供第二个的参数为键名： v-for4 F# } n) z& p2 G
, P; s Q: y; t o3 |
- <div id="app">- z; H9 N% m1 ]0 i/ u3 }
- <ul>
* t# ^# T8 ^) p% V% u - <li v-for="(value, key) in object">7 [2 a/ n7 D! P; O* B6 f
- {{ key }} : {{ value }}7 }# t* i: U/ e' O M4 V
- </li>
$ y- E) X/ `- o4 t$ @/ D6 W1 k - </ul>
; W: @ |. w2 t; U# j - </div>
第三个参数为索引： v-for" p( y1 Y" M( k6 h5 S
& e6 u. U x0 C7 ?' T- <div id="app">6 f: {6 f9 s, [& I2 z: j; a
- <ul>
# |/ I' S+ j' X D) c - <li v-for="(value, key, index) in object">% ]2 |9 O% ~9 G4 U! e
- {{ index }}. {{ key }} : {{ value }}
% i0 \$ `& {, m7 L, i# j - </li>" K& Q! Z7 C; g( ?
- </ul>
- q# |+ z" k+ L# P( t `6 H; ~ - </div>
v-for 也可以循环整数 v-for
% H" k! e" G( g: b: {
0 `) s+ t; A6 G) n2 r) C/ w- <div id="app">
s* L, m2 b& G2 c/ V% h% } - <ul>8 l. f& {/ J# N8 d( _. `# g8 u
- <li v-for="n in 10"># [& f% v! A% S0 `: G& I
- {{ n }}2 @* x- x' p6 B8 S7 R8 @
- </li>
* ?: }9 W+ i# |$ j2 ], ?* W - </ul>2 y4 D* E0 ^% R/ X# J+ c0 M5 z
- </div>
% a) [+ ~: a6 K6 R( ?+ }$ }( Q; I3 @: g7 K; h
" t r0 ^' I* ?! N, R2 l' D% n( h& ?% M8 \$ R
|
|
发表于 2018-7-4 10:56:27
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
收藏
分享
支持
反对
置顶卡
变色卡
千斤顶
