管理员
论坛积分
分
威望 点
贡献值 个
金币 枚
|
|
循环使用 v-for 指令。 v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。 v-for 可以绑定数据到数组来渲染一个列表： v-for 指令& c' m. b5 h: k+ j! \
- <div id="app">2 i. `: S/ ]# y5 j
- <ol>, s- H/ I2 Z5 K; M2 t/ w; y- n
- <li v-for="site in sites">- f( h f" _$ [; P- L: M
- {{ site.name }}0 F7 Y6 D# @1 O: K
- </li>+ {4 {& C7 ]. J" f: ~7 L
- </ol>* S3 H6 D+ _( T+ y- X) J7 k
- </div>
" }8 C# h4 @3 y -
4 q: ?% }9 o" C4 b - <script>" @9 o4 \6 ^# t. I0 A
- new Vue({
, G7 z H8 o4 X6 ^, a# K - el: '#app',
; N( u4 i3 F+ j- ], a* F - data: {
6 d6 U) o; W3 o7 O. I7 l - sites: [# d" F# N: F @2 H( r
- { name: 'Runoob' },# t, g- b& G! \2 r7 V% G' Y1 V
- { name: 'Google' },/ B; M0 i0 ^/ n7 t8 J2 f4 _$ N
- { name: 'Taobao' }
P+ P }. \( m' G! U$ j8 K - ]0 ~# t7 [8 \4 A0 p' s& k
- }
' f0 }8 _* ^& P0 @ - })
' I) \( w4 H* D1 m8 _" E: _* U3 Y - </script>
1 \% ], v. F6 o( a* B" s& o& n( a( Q" m4 c& I) ]- Z) P: |
模板中使用 v-for： v-for" }9 E0 W! A/ s: H8 m% @
- <ul>
6 s# o4 R4 K, [( `" Z - <template v-for="site in sites">, K+ e$ g% o" Z5 f6 y
- <li>{{ site.name }}</li>: S: p* C/ b! f, b# D
- <li>--------------</li>* j# q' M" b* g, [5 i5 R
- </template>9 t$ h1 K! v* W2 f4 H
- </ul>
v-for 可以通过一个对象的属性来迭代数据： v-for
J! G1 x% \9 c5 i4 \0 v- <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;">( q/ ^* Q0 e( ~
- </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;">: h* u3 F+ A; ]* e% e$ {
- </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;">
@1 m. @4 L" P4 T$ }, V - {{ value }}
/ ~9 {2 R7 ~8 p4 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;">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;">6 b. y& H5 v3 @
- </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;">
0 ]. q6 I, s$ T) 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;">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;">8 ]) \' p# S5 q# z
- 7 w8 |0 p; C# P: H& s7 M' p1 }/ M
- </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;">
+ f, F6 M w8 ?% @5 P - new Vue({
/ k) K! O; x9 V; b9 ~& R- r) b; i# \ - el: '#app',8 \; Z6 z5 `, b2 X2 v
- data: {
6 V7 T, ~# c0 l* Q6 w3 o, h - object: {
h9 z+ s* q. Z, Q* R+ w! X - name: '菜鸟教程',
. P3 s# Z( ]0 B$ y4 G$ @ - url: 'http://www.runoob.com',
+ ]6 p- y9 ~9 i% g$ ]* G; @ - slogan: '学的不仅是技术，更是梦想！'
; E1 Z# D0 U' a h2 f4 @ - }: l5 ~8 z: L$ m1 I, R
- }7 K5 ~# B# N4 [
- })
$ z, k8 l1 n0 Y# x4 ^ - </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, z. ^7 H3 [: A* m
, h( s+ t$ _9 \. j8 l$ @: k- <div id="app">* I' `( @+ j/ A
- <ul>
$ z% y9 J; D9 s- Y, X$ g - <li v-for="(value, key) in object">
; `% h/ @% l1 u - {{ key }} : {{ value }}
1 U5 m$ a6 q N& j- B, ^0 a - </li>4 J- R/ D; A5 |6 v
- </ul>8 j2 {6 k& r' }3 f1 D$ d8 r$ E
- </div>
第三个参数为索引： v-for
" l. l- G R& U- r. ? h' G9 E7 A. N
0 \' P) [0 R, R- <div id="app">
4 R- a# ^* T- _! l* c- V6 ]- a/ V - <ul>( T/ f: Z/ z" w% m! G9 m
- <li v-for="(value, key, index) in object">7 _* G( K& Y6 T# x+ S O
- {{ index }}. {{ key }} : {{ value }}3 h `% d2 N4 @2 {/ g2 [/ Z7 S) [3 r n
- </li>
+ D/ T7 A9 A, K' P g: m, @ - </ul>
! t$ I i; e1 O/ J! A0 k" K& G, q - </div>
v-for 也可以循环整数 v-for. u8 k4 i( a- s7 ]: S" N8 X3 U4 |
! |; ]9 l I) z0 ]1 T4 S/ v: i8 t
- <div id="app">
. f+ }! I% j, k7 P" H% R - <ul>
8 x2 M$ ]1 Q4 ?# n. P9 U1 U - <li v-for="n in 10">( r, {; B( d; L. e9 a ]
- {{ n }}
6 X6 `% ]0 ]5 o) T% i* Q - </li>. e% c6 {, h0 f
- </ul>
5 c D' i9 J* j3 `$ Z: S - </div>
3 w2 a6 u& `" j) P8 k, _4 X% W2 Q! @! I1 x( \; |2 B: f5 s x6 t
' m- O: B6 x$ c8 p
+ Z5 k5 o9 p6 h3 U# W! H4 i |
|
发表于 2018-7-4 10:56:27
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
收藏
分享
支持
反对
置顶卡
变色卡
千斤顶
