管理员
论坛积分
分
威望 点
贡献值 个
金币 枚
|
|
循环使用 v-for 指令。 v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。 v-for 可以绑定数据到数组来渲染一个列表： v-for 指令( ]( u: t! C1 G) e& S9 l1 r; ~/ o
- <div id="app">
7 |' r2 T, @; X: k - <ol>
' V( l2 G* y0 j3 G; @1 k, H - <li v-for="site in sites">- i, a" [' ], e- `% Z
- {{ site.name }}
- _; c0 a2 \! Z0 v8 G9 Y# K - </li>
$ Y' I4 f* W. W& U# r' t/ o - </ol>' z3 v Y: Q1 V2 |
- </div>9 W; X6 G" C' ^; n. s
- $ J: Y3 }% O0 w: T9 c6 _
- <script>2 g' I0 q0 K3 d: e/ A' H6 q
- new Vue({" m: U f" h" E M% l" J2 w
- el: '#app',
& @: Q7 d" h1 ~: Q - data: {
4 f3 F! T) d$ I6 k, ]8 \ - sites: [
! j! [( u; M! n! l - { name: 'Runoob' },* X) v% `/ G2 q. R o( {4 L
- { name: 'Google' },
, [& |- w) x" e6 Z& ^8 Z0 k - { name: 'Taobao' }
! E. M# \& }8 r4 _( y. ^3 D8 _ - ]
7 |% h% s2 U1 B0 A! E% ~# k8 } - }
/ |6 s4 p, M: ]! Z3 B Z0 r- Z - })
+ ^+ I( s" A% j9 m$ x( ?/ H) c - </script>
7 ~5 K- |! B+ t' _- F! F" u$ \7 X7 F2 u) g8 Z
模板中使用 v-for： v-for
, F4 `1 ]2 W, ~" ~, U {- <ul>
# k) K$ K/ ^) J" ~ - <template v-for="site in sites">
1 h8 n1 \! {$ B9 g& e - <li>{{ site.name }}</li>; i% T6 P G! O% M
- <li>--------------</li>
9 ~' L( P: D* {" |8 [0 X - </template>& y/ W3 D w2 }! z
- </ul>
v-for 可以通过一个对象的属性来迭代数据： v-for
7 K# p5 o1 m+ P8 g5 K6 w& s6 ~ p- <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;">
0 v8 F1 e& [8 O, U5 h' y: 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;">
4 S% `5 C; ^+ h3 N* P: I% O1 c; K - </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;">
) C$ ~+ S- F( S" R! W - {{ value }}
( f2 \# o2 j# _3 V6 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;">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;"> B) X& L0 ?; `9 E9 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;">+ l- q- Q8 a0 K8 z9 K; X3 S; 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;">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;">% q0 o; {1 e3 W2 s8 B
-
1 |) y" g0 o/ j$ p0 `- b% |$ I6 t; 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;">
: e8 s( J% i$ I% j. ?$ r - new Vue({
6 @- E/ M: b% D. T3 @6 b - el: '#app', k5 {* T' {$ r# X5 N5 n7 ]" |0 E
- data: {
9 ~! o8 q, d& @3 F - object: {
# o% G% V b: y* s" M# k; V$ U - name: '菜鸟教程',
4 R% z: ]( \4 A+ E7 x - url: 'http://www.runoob.com',
. n+ V' W: f7 Q* w: E2 w - slogan: '学的不仅是技术，更是梦想！'4 Z7 N( W+ f# n. C8 d( f( N
- }
% _. z) ?# A1 [: r, {# T3 A' r - }
0 `, P; e9 C) h( b2 P - }); y, u8 j; ?* `. 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;">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
0 P% H# a7 [' c; R
0 s* d( H! T6 r$ t8 i8 t! ^- <div id="app">
( R, W) M0 N# O: A* _; \- K - <ul>
& I' R7 x: t( j - <li v-for="(value, key) in object">
% W" u$ E1 f; N; q2 @6 i: N5 Y - {{ key }} : {{ value }}
6 O& C" g$ g7 [3 D - </li>7 U- S4 F$ Y5 b6 M$ d
- </ul>8 i4 u# H2 m+ m8 y- {4 J
- </div>
第三个参数为索引： v-for
1 C+ `, [" l! H3 f w6 z
`5 c7 O5 ^+ Y* s, h- <div id="app">
$ N. s6 K3 D3 R- {0 M. ]; y* i9 ~ - <ul>! ?/ q4 p, N( H; `) A
- <li v-for="(value, key, index) in object">
+ m0 S) B1 X* u0 L6 G( j) Y y% i% | - {{ index }}. {{ key }} : {{ value }}
- T3 s, `0 p+ T) p. p. w/ r - </li>, l% n; Q4 k7 ]9 f @1 t9 o
- </ul>. S2 l' r3 D5 `/ A
- </div>
v-for 也可以循环整数 v-for
0 _8 o8 y! \/ D3 I1 ]) u5 U3 V& N" i; W4 U( c( P
- <div id="app">, K# E: `6 v; I
- <ul>4 S( E# n- i' O
- <li v-for="n in 10">
8 _ ]: C7 f8 p1 j - {{ n }}
; D' y& E9 {4 b B/ g - </li>
5 p) P3 b: k5 f- a/ Z. W - </ul>
! N9 r2 ]1 X) B - </div>
: U8 z- W+ C0 H' L1 m
I0 |% O% x% l. X
, X k- n' U4 f3 c* k |
|
发表于 2018-7-4 10:56:27
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
收藏
分享
支持
反对
置顶卡
变色卡
千斤顶
