管理员
论坛积分
分
威望 点
贡献值 个
金币 枚
|
|
循环使用 v-for 指令。 v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。 v-for 可以绑定数据到数组来渲染一个列表： v-for 指令+ \. \$ L! m% |( w, P+ k
- <div id="app">5 ?4 a6 D0 T; b' R& V& @' B
- <ol>
7 w; Z8 x% \: k. Z9 Y - <li v-for="site in sites">1 w3 L% J; y2 h+ w# l
- {{ site.name }}% R- x3 F( p% t0 k0 o _6 p
- </li>9 O+ @1 L, ^' V. b" ]" M1 n. }
- </ol>
9 o3 f5 O5 \) n* s& w/ h0 L" f) W - </div>
7 ?$ `( n* A0 s r; v - 8 g0 y: Q) n0 S9 v) l7 `
- <script>
8 y# x/ D2 ~8 j- Y- B) w - new Vue({
# e' a3 ~9 B$ a) W - el: '#app',5 z1 M7 Q( l2 x7 z
- data: {5 Z n% W. i- D/ H+ P0 E) N; O
- sites: [& B8 s" B: M! t9 X
- { name: 'Runoob' },
$ s4 {; m, \. Y7 V( d% @. N - { name: 'Google' },
5 D! m0 Q9 }6 q# _/ Q - { name: 'Taobao' }9 x! x5 k3 c$ e x, Y
- ]" M0 ?$ U) L$ |
- }5 \1 p% T& B0 ]( t3 D1 K/ W: g* Q; r
- })
1 Y; s) x9 R! A - </script>
( w9 H# [* c* m; @* x# V% ?$ B模板中使用 v-for： v-for0 ~7 l+ A5 {8 n. }
- <ul>
$ B- o. W) t0 `8 Z, F0 I: { - <template v-for="site in sites">
, n2 [, |1 ^8 |( I& q# D4 ?% x - <li>{{ site.name }}</li>
, H6 {1 e& j+ U - <li>--------------</li>
0 [0 z K$ B. {4 h - </template>& e3 ^2 _; @/ J6 Q, h& M7 J& m
- </ul>
v-for 可以通过一个对象的属性来迭代数据： v-for
7 n0 p) g( Z, i8 ]: m% K0 i" N- <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;">/ F% C) \0 b5 Q) a7 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;">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 {: K% X+ v/ n9 y - </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;">
; T6 }6 V$ _2 P- w# B0 M - {{ value }}
# \; b. g% |: r# V. R& J7 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;">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 A6 Y7 y8 g0 u# N! g8 I/ N! 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;">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 ~. r/ m, y* u% U, r. V, 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;">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;">
* M3 j' e ?( l* k! s+ ^: X! G$ t9 q -
8 O' p; m: X I - </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;">" R3 o! }8 b% H9 m
- new Vue({, n7 c' `' r; m4 }' ~( |% M1 } [
- el: '#app',
! C7 y. k0 k5 k" [ - data: {# J( W$ T) X2 H o
- object: {! |) I# h3 x% O7 d5 W' e" n
- name: '菜鸟教程', g# ?4 i9 Z5 y; Y; Q* i9 `
- url: 'http://www.runoob.com',
) k" N* o, u) D4 I9 f" f - slogan: '学的不仅是技术，更是梦想！'7 W6 x" `8 E; L; ?- S" Y0 N3 h
- }5 r: x9 _0 R$ o0 p0 k" {
- }. R$ T* _* b# |* X1 _! P# O
- })' A# u( n6 X2 r. M% y
- </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-for8 V+ Z( V$ Q3 q8 U0 z
; C p. i( U" R' u" ~ t- <div id="app">
T$ O& {. f, v& X6 ~8 H' t - <ul>& u# b# O) S( [: C! v
- <li v-for="(value, key) in object">& r- s- }, p4 w% j
- {{ key }} : {{ value }}+ L; k9 L" J2 p$ V# o/ `
- </li>" s. W7 r5 ]' y1 `& T' w
- </ul>
6 z B* w& [9 X - </div>
第三个参数为索引： v-for
8 n' z1 K. c- `: o" @; }* k" g" ]" o x V. R
- <div id="app">
: m% q4 f+ W( N& f+ [/ n% k" q - <ul>
" y- d+ u8 p# C" M! {; ?' \ - <li v-for="(value, key, index) in object">! i) _! C! C2 K/ x# T: L4 T/ E
- {{ index }}. {{ key }} : {{ value }} j% X3 L" X6 N5 T: `* K/ s3 A
- </li>& x: F/ H' p, |# m' T1 K; }# o5 } R
- </ul>
, x& X8 `- s: s2 r0 G4 j - </div>
v-for 也可以循环整数 v-for
: Z0 P! _0 f: H2 M- s/ x* p6 c( b( b* h6 _' e
- <div id="app">6 E ?$ F$ o& [2 D1 y
- <ul>
; d+ d' `9 [" o: K# J - <li v-for="n in 10">
0 y, i+ W0 r/ S) Z( p. t$ _- X - {{ n }}' }5 M8 g! p1 c
- </li>
" P. A* G8 Z9 q6 {( D" O2 p - </ul>) C# Z9 l. G3 B. B1 W
- </div>
2 L( L. @- C8 L- ]% p: i( Q8 l4 ^3 H, ?, {% r2 T
% b: z8 O: U$ N" k6 u
|
|
发表于 2018-7-4 10:56:27
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
收藏
分享
支持
反对
置顶卡
变色卡
千斤顶
