管理员
论坛积分
分
威望 点
贡献值 个
金币 枚
|
|
循环使用 v-for 指令。 v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。 v-for 可以绑定数据到数组来渲染一个列表： v-for 指令/ u4 `, u0 v4 b7 v f2 \
- <div id="app">
+ b U \) o+ W" D - <ol>) p2 F. ?+ |8 S5 Q
- <li v-for="site in sites">/ k- T3 y5 M; |( ^) G: f
- {{ site.name }}* a9 ^$ o# I+ U( X' Z9 z' U9 l! h* ]6 L
- </li> T2 J5 O; r9 x f+ p0 w
- </ol>
, U `8 ?( O6 J; ?+ L n. Y, k - </div>* l0 [; ?4 v! F7 C8 s
- # e- ^3 r( n- A
- <script>' g- D, i3 d: X3 h4 k6 }
- new Vue({% f% r! x. G% m# r
- el: '#app',
% H6 x/ [ I: b+ m8 w7 Q7 ? - data: {
8 Z2 Y- s( R: G7 i/ l, N8 x5 v - sites: [% l s/ \: ~' n. j' N5 y( g; ^
- { name: 'Runoob' },/ v, W1 T9 ^* m. Q0 [% {# v, z; W# s- y
- { name: 'Google' },
: e( W% `* r! N - { name: 'Taobao' }; M1 d0 i$ [% I7 F0 `$ H1 k% Q2 n
- ]# T& `; d/ r c6 o" S! m, K2 ^
- }1 W* r( p( A7 \5 o/ o% g4 M
- })1 D1 ~, B+ D, J
- </script>
5 p: w. t. @( g3 @2 t7 q. O) Y. x0 y* Z1 i* r2 |' G& I% B
模板中使用 v-for： v-for
7 E5 [* o8 ]2 o4 n& u5 [2 K- <ul>
6 M. E5 f2 B& q: i2 k- a - <template v-for="site in sites">
& }1 n- Y, G4 z" b& h - <li>{{ site.name }}</li>7 ], d8 Z+ \' _! `
- <li>--------------</li>
~5 r6 t' J r) H3 |+ ?: a" z - </template>
5 @/ E7 w5 V$ o - </ul>
v-for 可以通过一个对象的属性来迭代数据： v-for
4 p; |! x$ w U& h" T0 Z3 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;">
8 f" v2 R1 [7 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;">7 l- n5 i, _% x, D# B7 d- v
- </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;">0 n% c9 F- X+ M2 R
- {{ value }}0 D: O [- M" f! |
- </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 K2 G" X! L& d* s6 V/ R - </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;">% o# ]* y" Q; ]" F! S8 E7 @0 U
- </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;">
$ p& j# p7 Z+ ]# _ - 0 _4 \5 D/ D: U6 [5 J; B2 N9 M) }5 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;">% ^$ G I- c& W' y& b
- new Vue({% Q+ K% A) V4 F
- el: '#app', _7 f2 @! [! A/ y; R; K- v
- data: {
" u8 R3 ^& @4 |. E - object: {
! a# R" y2 l/ L7 ?; Q, g7 ] - name: '菜鸟教程',
+ ?1 R7 P, h/ t' j, M5 v- ] - url: 'http://www.runoob.com',
3 `7 b W+ h) J: V& L# Z4 o - slogan: '学的不仅是技术，更是梦想！'! m9 I$ b( Q) O3 @& u' {
- }
, {- P. o, f# J* R4 N4 ? - }
% A1 J' Y( G) j4 I - })( o( u5 S' x( `' `/ }# {. H Q
- </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$ N3 x T; O) Y/ b4 `
8 {5 S' y4 W' a9 E. y6 G0 x
- <div id="app">
1 ?7 t3 ]! F. T, l+ @, k R& b - <ul>
' a% t) V; f0 K- F - <li v-for="(value, key) in object">
6 b, i% Z$ R8 t% Z1 I$ _ - {{ key }} : {{ value }}; [, x. |+ `- n! t* s
- </li>
$ Z8 Z# ~' b6 `( `+ U - </ul>
" Q G( s2 J$ v. ^# m1 x - </div>
第三个参数为索引： v-for! d/ s. ~8 Q9 J' f- r! n6 n
- \' m/ ~ e, w3 I7 ?4 H4 b7 t- <div id="app">/ X: w! w7 C1 W2 W5 W2 h
- <ul>
; q% g" d" A/ l7 F |3 t2 | - <li v-for="(value, key, index) in object">' D) ?5 {6 t9 s0 z# b8 Q
- {{ index }}. {{ key }} : {{ value }}
, k3 m% n$ k2 @, f& E) Y) k - </li>
, V0 P" t% l5 n - </ul>, `4 `, I/ q" T9 ^
- </div>
v-for 也可以循环整数 v-for' v0 i/ e! v/ d
- n$ c; w4 O( |: S- <div id="app">4 J7 Z/ M8 M9 {2 N% F
- <ul>
5 f" ^0 w( A3 P7 p7 O - <li v-for="n in 10">) g) ]$ k/ Y% U
- {{ n }}7 A$ n, J% j- R9 b8 o
- </li>; Z8 Q0 [* B4 `& E3 C
- </ul>5 x5 C( A1 S/ W7 o+ v6 ^( m- W. x' E
- </div>
9 w5 H( a) e$ ]. w3 f, Z5 B: m' Z: g/ A' Y
# O: N. {! A3 j Z) I( z k N
( h9 m5 P$ x0 g8 c0 O% Y |
|
发表于 2018-7-4 10:56:27
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
收藏
分享
支持
反对
置顶卡
变色卡
千斤顶
