管理员
论坛积分
分
威望 点
贡献值 个
金币 枚
|
循环使用 v-for 指令。 v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 site 是数组元素迭代的别名。 v-for 可以绑定数据到数组来渲染一个列表: v-for 指令; p9 L+ R" X0 \
- <div id="app">% D5 l7 T9 i3 b- d+ z; X
- <ol>
1 S! x! A2 `( P9 f4 ?8 y - <li v-for="site in sites">
9 l" I6 J- |7 p6 u9 c. K - {{ site.name }}
' a' o2 v" a& f% ]' s3 b - </li>
. b) Z5 p d5 H - </ol>& o: _" w. B& g5 G* g7 f
- </div>
0 o% E' X" X G% v* D; R - ! l! {8 X; O: u6 @: s# ~
- <script>
. L) U1 O( V$ {0 g | - new Vue({
0 t5 v% j) M6 A4 j6 C p% }; S: D9 y8 Z - el: '#app',
" u. N z: c" e( R( w, ]# w# H0 p - data: {
( V4 Y& X: q& \/ t - sites: [% p+ Z2 k! z$ \, ^1 g
- { name: 'Runoob' },! X: U+ E1 C& w5 Z) a. A3 `3 T0 w5 v2 Y
- { name: 'Google' },6 k: Y9 f' g# o
- { name: 'Taobao' }1 d+ M' F6 S/ e. H2 _' q" V6 n
- ]
* J0 ?5 V1 n( ]- o - }
* V/ L) c+ y& W. C0 a/ K# q' e - })
% Q; e$ @9 c; f! i5 H9 H# G - </script>
复制代码
2 V# ~8 g/ f% n9 |7 X6 O1 y; w) Q5 i: F
模板中使用 v-for: v-for
4 }+ o" ]% }& K2 e) P9 W' p9 J- <ul>0 _, B( X8 }% ]" |: R
- <template v-for="site in sites">7 h# P! q8 _) X: i3 ~( D% N
- <li>{{ site.name }}</li>
5 k T2 I, i2 s7 p! b - <li>--------------</li>
) n5 o7 E0 [" t; x" f% _ - </template>
& Z+ ?" z( \0 H7 @- h' M - </ul>
复制代码 v-for 迭代对象v-for 可以通过一个对象的属性来迭代数据: v-for/ d O# v& }/ Y6 z0 p8 Z0 l
- <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;">
* }9 X) H1 f& k( m y4 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;">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;">* k5 Z6 C" ^0 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;">; _$ ^' I% c2 p/ [( l5 t) [4 j" @
- {{ value }}
q7 i4 |+ K% ^9 D! ~5 b - </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;">/ w$ z8 p' a7 [6 q9 x0 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;">/ w5 }- y# q, g, [, p
- </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;">
4 f7 u7 L8 V# d* T- R4 i - , P. Q8 u3 u/ W; \' p
- </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;">$ W0 V( x" c: F7 Z2 G3 k
- new Vue({
7 o; x: Q' _: \2 S5 G - el: '#app',, F! I0 a% j( v: R1 m( Y
- data: {
) q( O+ Q7 J$ j - object: {
' l/ S) Z' M# h( f% c3 o - name: '菜鸟教程'," H8 C F: A7 g8 Z8 |, g( I2 G
- url: 'http://www.runoob.com',! p: L: J% G) n; ^# H
- slogan: '学的不仅是技术,更是梦想!'& p1 Z" N c/ u
- }
% g+ u, L5 A, ^( z - }+ p5 l' E0 U# Z- {+ o! N
- })
, f. ]6 M( I/ \) l0 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;">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-for5 x3 _/ ~1 |" Y
4 [. m# X' p \. M- A
- <div id="app">
/ ]+ z1 d# X2 q - <ul>
' W+ o8 U9 Z& k$ U - <li v-for="(value, key) in object">
! j5 `6 P5 D7 F" i' q- I2 a - {{ key }} : {{ value }}
. g2 ^% \( e8 ] - </li>% K x* \3 U; ]. r% q$ h+ z
- </ul>
( R) l: c0 s7 L0 G# G - </div>
复制代码第三个参数为索引: v-for
( q. H4 ^; p t. A' {6 D6 d5 G: F0 i6 o0 c _
- <div id="app">
7 [* P8 v$ K2 i - <ul>
' _' G6 s$ u$ n8 g$ |# O - <li v-for="(value, key, index) in object">
% e* t( z, A' c+ _ - {{ index }}. {{ key }} : {{ value }}
9 B4 T% Q9 j" d, R% ?: A$ M - </li>
* B; @* d. _" o5 q1 x - </ul>. i% t0 ?& \3 m3 L1 A; a. D
- </div>
复制代码 v-for 迭代整数v-for 也可以循环整数 v-for: x/ y$ m2 `$ P$ g" X
/ u% I2 P; M8 ^/ D- <div id="app">
- c+ A1 y- Z; x: Y$ N w - <ul>
. Q$ {2 Q' u# G6 ? - <li v-for="n in 10">
+ K: G# C, K5 r. v6 D6 p - {{ n }}
& Y! B b4 ^$ V% X2 S - </li>; _% l0 O/ ?8 D+ `% v* t5 [
- </ul>
" F7 G2 h9 ~# l5 v - </div>
复制代码
3 @2 V6 a7 ^, D$ c4 O% A7 r' @! J" b- g, K
( F) Y- `+ w, A. _* ?, C
2 H5 b2 I6 E1 n! m% m- f8 \ |
|