管理员
论坛积分
分
威望 点
贡献值 个
金币 枚
|
|
循环使用 v-for 指令。 v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。 v-for 可以绑定数据到数组来渲染一个列表： v-for 指令 b+ b$ s. g3 j3 y
- <div id="app">
, `# c; O; G$ i( R* Q# \% M - <ol>
9 K$ Q, p. j! i+ b - <li v-for="site in sites">: G5 y; V9 Q3 P" m. B+ ~: t% J
- {{ site.name }}
! P8 \( W( e I+ T9 i - </li>
7 n' W9 ~0 e6 f# I% {( u1 Y - </ol> ]# o/ ~$ K' N& i5 P
- </div>
C/ g) t/ p! n/ g& e) w! ]' c. ? - 5 I0 U3 G. d% R5 c7 I6 {, t
- <script>
* w0 K! j( x1 V - new Vue({4 H+ o: G; e& B5 o7 x
- el: '#app',. c# M# T/ W/ m2 V+ s6 C
- data: {
$ g+ t- Y, n! v0 _0 U1 V6 p' } - sites: [
3 Z$ c3 W( N" e2 T' h- B - { name: 'Runoob' },
: c9 l: n3 C a - { name: 'Google' },, {4 @: L' M9 t( P9 N1 f
- { name: 'Taobao' }
7 k% ^! d2 W+ M! F+ z2 [ - ]! N0 ~0 Y1 T7 m. x {1 @: B
- }) c4 P f8 R5 N2 q* T
- })8 s. D; p( N9 b1 h6 X. c
- </script>
' p% O/ h' v7 Y
9 L2 P& F( g6 e+ Z# c; g; H) d Z模板中使用 v-for： v-for+ p6 X5 P! K# v
- <ul>0 h# q: d. p O( T% P& _2 X
- <template v-for="site in sites">
' ]* e8 f; ^, \$ d; h, ?0 n2 O - <li>{{ site.name }}</li>
0 @6 b& d- M3 g5 R+ z0 E- { - <li>--------------</li>* v F9 d. [ r! {& L
- </template>
& {, C' i" h& z - </ul>
v-for 可以通过一个对象的属性来迭代数据： v-for
& V, r s4 a8 J r. `$ z- <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;">
j1 g& M9 H2 A; ]% K6 r! 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;">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 u% K$ d( ]5 I8 q4 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-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;">/ e) S: V) S6 U4 ^
- {{ value }}% c4 O! r4 C6 I- y! 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-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;">' k2 O' ^, O) p$ 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;">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;">
+ E8 N/ A$ S& @- X/ 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;">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;">( N* ]/ k4 C7 `
-
: i6 |9 R V1 K% y2 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><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;">% A2 S: W3 ?* F
- new Vue({ x% Q* V7 h$ f; c
- el: '#app',
4 r1 Q+ ^' Z3 i: x7 I4 n - data: {
- A H% v" w4 t) D* v - object: {
/ }9 Z4 s. O) _) c6 d, y: y( L* x - name: '菜鸟教程',- p2 W' O3 }, N! D
- url: 'http://www.runoob.com',$ x; F* i9 u8 F+ {
- slogan: '学的不仅是技术，更是梦想！'
! T0 b! V2 B D0 l! k, K9 K+ x - }
+ ^- e7 G. V' ] - }
3 a0 h( l5 f) ^ - })
. [4 @ |5 }/ h) q$ k9 |# N* 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;">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# w0 u7 b9 q/ V! F' X
. x. `+ | w* u! I2 i- <div id="app">3 |) U( i' [, N6 G( c! K% y
- <ul>
+ c; j1 r2 ?- o" B, y3 a& E) K - <li v-for="(value, key) in object">
6 ] t" W& A' \8 m% P( z" f" f& [ - {{ key }} : {{ value }}& y: _. e- F5 X
- </li>
3 \8 ~+ @9 l9 H - </ul>
; ~, {9 p; v4 v# L - </div>
第三个参数为索引： v-for
5 r5 a# h2 F/ f, M- x, d% D4 s
! Z0 p# d! \ F- <div id="app">
/ j M% n: W- J( L$ e* O+ z - <ul>. ~" G# t/ m8 H0 I- }9 g
- <li v-for="(value, key, index) in object">2 g, F' g) R( X
- {{ index }}. {{ key }} : {{ value }}9 ?" R7 ]+ ~1 x6 G
- </li>
5 \) h% T" \0 `0 O - </ul>' G) A: I' f0 p9 ]( ?2 Z$ L
- </div>
v-for 也可以循环整数 v-for
: O& V7 Y6 J: u( b2 |6 f: t) L( F3 S" H0 m* t
- <div id="app">/ Q( b7 _' |$ F8 M' x6 M+ o
- <ul>" U; J3 m( K! a9 i: l9 S V
- <li v-for="n in 10">
7 {( a- }. S; @3 p, M+ X3 ~ - {{ n }}
( _; N" k. U+ m' c, X U+ p - </li>
# ~+ @' Q( J# K$ a - </ul>: o2 b4 W6 K) v) _# K/ F
- </div>
# z5 P2 P8 G* N5 L6 V
B& I; l* r) Q7 R, G8 V7 H* i
! f6 H8 c& J- `1 W/ j |
|
发表于 2018-7-4 10:56:27
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
收藏
分享
支持
反对
置顶卡
变色卡
千斤顶
