管理员
论坛积分
分
威望 点
贡献值 个
金币 枚
|
|
循环使用 v-for 指令。 v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。 v-for 可以绑定数据到数组来渲染一个列表： v-for 指令* b1 ~, G( N; @' G# B2 m% V0 b& k
- <div id="app">; ~9 i$ M9 r# w4 `( l
- <ol>
$ J Y9 T- N7 r - <li v-for="site in sites">
8 @* G! S7 z. H+ v. v - {{ site.name }}: W% c" m9 D/ C0 |& V S
- </li>
2 N! A% O& O; H - </ol>
9 p5 \- ?. }' V3 T2 n- B8 b" d* S( x - </div>
& N8 C1 d# a6 }& K4 _: E, G7 F- Y - ; e/ X5 X* Q) a% m& n+ I# K
- <script>- y. G1 T$ n2 |1 b
- new Vue({, x. N8 Q6 t7 O6 x; {- `% k) P {
- el: '#app',! v5 Y% _% s: o2 _1 q2 O1 c7 B
- data: {
1 w- N, H, k4 T$ `) o6 s - sites: [
% j4 C( p* r' W @0 n: H9 D% i - { name: 'Runoob' },
2 O8 c3 D) \$ B+ ^4 @$ f - { name: 'Google' },
& Z& y( n ~0 L) f - { name: 'Taobao' }
( q7 m8 m+ A4 r# T* \ - ]
3 |) g8 U" ?& L" W' ~# y/ | [6 | - }, u( q- d5 E) z' M1 _ f- s
- })
( m* t0 b- a- }8 t5 A; K2 d7 e9 A - </script>
M. m; ^, c) h) ~
' X! p# N! o! u* V! p模板中使用 v-for： v-for: |- _( K" \5 W. K& R, r. @
- <ul>8 Q* i/ r* L/ |& r5 H5 F: h( n5 X. X
- <template v-for="site in sites">" i: x0 C T! C2 n$ D; p
- <li>{{ site.name }}</li>
6 @6 L% T" Q, U8 v - <li>--------------</li>$ P, U7 G/ z5 t+ h) O& S
- </template>" R( c0 Z5 m# V/ O' w
- </ul>
v-for 可以通过一个对象的属性来迭代数据： v-for
% u) T+ D9 t8 d- <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;">( c7 D1 s7 Z* d: z
- </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;">
. V( E: h7 A* i7 `' q5 d% s - </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;">
7 Z; {+ t3 f' j! x - {{ value }}8 s! |" ~2 E, M6 Q
- </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;">: g, m! Y6 Z! k, ?& I6 f
- </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;">3 ~9 `# {$ U2 u! d" y+ m0 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;">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;">
) ?! |9 g7 t; f6 K% l - . W- \! }0 m; }7 ?- W
- </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;">
* |8 Q2 j* D) _% w4 B - new Vue({ X# `" Y- M W
- el: '#app',
+ Y7 J- S3 x* j; N& {, h: V - data: {: n- G' }- D' N! ^! ?) j
- object: {% B# Z6 J, W/ L- }. }( h) @" ^
- name: '菜鸟教程',
) {3 O! u5 o$ n$ c8 j2 U - url: 'http://www.runoob.com',
! V' ]. ?% m* ~" K+ i - slogan: '学的不仅是技术，更是梦想！') m9 V9 S/ P) V# j
- }. X9 p9 v- v2 k
- }
1 s( Z E% z/ Q) R* A$ F9 E/ D - })" n v( E& m: d2 b" K: P: s
- </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-for
" _( |* ^, g- b. w- Z+ O; L1 n9 ^0 T, U& C* Z
- <div id="app">
9 b' I7 [; O$ e) t - <ul>3 D8 b" P" H- A
- <li v-for="(value, key) in object">
$ e: D( P' }# l - {{ key }} : {{ value }}
( Z8 c/ Q( O& P5 @. m3 F - </li>
: w% t/ c5 R8 I: _: a - </ul>$ }* k* Q& I, X8 R
- </div>
第三个参数为索引： v-for
3 C. i& J. ^- k D) d& X" c: }2 w3 y) f
- <div id="app">) d, H5 W8 ^4 { Y5 \2 P
- <ul>+ T: x3 |# [8 c: z) ^
- <li v-for="(value, key, index) in object">
0 ]5 j( l9 h# |' W* j0 U1 m - {{ index }}. {{ key }} : {{ value }}1 k/ j$ {( D3 ?. o% V
- </li>% X @: W1 G9 ?
- </ul>
0 g# ~, L$ N0 s, u/ b. l - </div>
v-for 也可以循环整数 v-for7 o- j# x2 _: K* }& {
# I, a1 J' I( [: E1 P0 I
- <div id="app">0 S( E# n. h* E8 `/ `
- <ul>9 k+ K! H! J+ Z/ r( E4 g
- <li v-for="n in 10">/ F0 b) }. f; H
- {{ n }}
! p5 @$ q9 I: m8 [( R+ Q( F( g8 ` - </li>
1 f2 n1 j5 U% n% A - </ul>
1 y t$ F: A" N& }$ g - </div>
! j7 C d% P4 L) X
- Q; K+ h) S9 @' s6 A3 x# @- F. N4 N% z+ ]" v
|
|
发表于 2018-7-4 10:56:27
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
收藏
分享
支持
反对
置顶卡
变色卡
千斤顶
