管理员
论坛积分
分
威望 点
贡献值 个
金币 枚
|
|
循环使用 v-for 指令。 v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。 v-for 可以绑定数据到数组来渲染一个列表： v-for 指令
1 x% Q, }7 G+ j% z- <div id="app">
4 o: o- Q6 ~5 `/ P7 w3 g r. r - <ol>$ Q' X1 t& N' h, X( u
- <li v-for="site in sites">
+ @# k0 X2 x* A5 E# C% p1 X - {{ site.name }}
2 e. h p2 @2 R - </li>5 m0 k1 p" e! U* }+ P
- </ol>
. Y0 \% p% M4 y' N& ^ - </div>
7 o! s7 _- p8 _4 B( } - & Z2 |# X; X. C+ B( s1 ^
- <script>
& I# K% H3 c; O7 T2 e8 K' ^ - new Vue({" M3 E* q) \, i. o& k* @
- el: '#app',0 {, x) }2 s4 p9 V+ }* {
- data: {, \ H" k0 V* s
- sites: [
) A9 f7 x, Q& q/ \ - { name: 'Runoob' },
4 B* [6 U/ H$ [7 ]3 |/ }- G - { name: 'Google' }, [! l# A' c4 m0 ?, _+ F
- { name: 'Taobao' }
* h: i# V; P& r2 @- Z - ]
1 i+ d5 Y/ ` }6 A- f - }# m. x2 y! n) S+ k) t
- })
2 P& @5 }, e7 l: P' L - </script>
; M9 o. Y; ?3 o: p1 f% ?1 p+ k% U模板中使用 v-for： v-for/ b/ X: K0 }- T# ]$ u$ q$ c
- <ul>) ~$ z# I1 a- @ | G
- <template v-for="site in sites">
( b6 E$ y) {8 e% f - <li>{{ site.name }}</li>$ R3 F+ x" l" e5 f* X
- <li>--------------</li>: B* D4 ?' j* y' d0 M
- </template> i0 j- S4 A0 r) P9 Z. N
- </ul>
v-for 可以通过一个对象的属性来迭代数据： v-for9 p/ k; h) `5 F$ T( U
- <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;">
" D2 d% n' d/ Q' V: H1 f2 C+ 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;">0 \- Y) `* Y) x6 M* 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;">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;"># w) R) R4 d* k h
- {{ value }}
% z- Q6 y! o- d+ 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;">8 D8 R0 ?1 U0 G8 w/ 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;">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;">' Z+ \2 i% f! I+ d8 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;">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;">! Z* z3 K+ d) `2 Q+ f' A
-
. X: p) i- v& x4 F1 M Z - </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;">' [, [6 ]+ v% t+ f' v. @
- new Vue({( }+ I, x, ^2 k2 c. F
- el: '#app',
5 N* Q# `) x2 j5 T' d* ] - data: {
) x; _% t; J# H) y - object: {
: C. Z1 j+ E0 ?, g( |8 } - name: '菜鸟教程',
v& u7 _/ J8 _. Z6 w& i5 B - url: 'http://www.runoob.com',
% Q: p O% R2 L7 J - slogan: '学的不仅是技术，更是梦想！'
) G: \ d2 ?0 m5 O) E* T1 z3 U - }0 q: e/ Y1 @1 C8 F Z7 m9 K
- }
* ?2 B: F O4 O - })) T: K8 N) [& p, K0 `
- </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-for6 }* h- w7 |( f; T
8 i3 E; }; i! T& l9 j+ X- <div id="app">) d0 B& e6 }3 g
- <ul>
* M: m- T; g+ S1 w+ ~' Y# c w - <li v-for="(value, key) in object">9 q, _1 G" [+ _. m% o
- {{ key }} : {{ value }}8 O k, h. S9 d$ W3 E% |
- </li>
5 f& n8 i% n) f9 b0 n - </ul>
* }' |+ A& i, [% Q+ { - </div>
第三个参数为索引： v-for' P* K3 G2 p5 f2 g+ B
2 ~0 ^7 w: Y5 d3 p3 |
- <div id="app">
2 g: a# p- d/ ^ - <ul>" @0 k2 M9 i% x( a- {. x* Y# W
- <li v-for="(value, key, index) in object">
9 x D" s2 d" ~! x: u7 q( w - {{ index }}. {{ key }} : {{ value }}) A( e, J+ c u6 p
- </li>
* p7 x* A6 a7 l) c8 J; u - </ul># A" \0 |; K& @% `; J# B; D
- </div>
v-for 也可以循环整数 v-for* z. D1 E0 e1 { t. h- t/ U
$ `% E! V) h( ^6 Q& L% J, d' y0 G- <div id="app">
9 P Q7 j* Q. L0 T6 i2 w4 U }3 R - <ul>
8 D# [( c. O, l+ y% a, y" `' t9 Q - <li v-for="n in 10">+ K+ u) b3 |, Q: S
- {{ n }}" p% C: d _- Z
- </li>& w% y# X( l2 n. a; y2 p3 p
- </ul>
+ B$ }1 M3 Y2 v. C4 |+ C - </div>
$ w; x) _+ _* N+ T8 t) i4 m" b9 I$ O$ o( B6 E
- m* ?4 [6 e, M# N) i1 Z
|
|
发表于 2018-7-4 10:56:27
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
收藏
分享
支持
反对
置顶卡
变色卡
千斤顶
