cncml手绘网
标题: 循环语句 [打印本页]
作者: admin 时间: 2018-7-4 10:56
标题: 循环语句
循环使用 v-for 指令。
v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
v-for 可以绑定数据到数组来渲染一个列表：
v-for 指令: Z, N% F* U+ S; z6 O& g. u
- <div id="app">
5 a/ r. s' P4 i ?0 o+ r. o- H - <ol>. s& T$ Y' a4 L
- <li v-for="site in sites">
1 H# i R- ~, B - {{ site.name }}2 S/ s5 i: T( r8 C
- </li>, Z0 X3 ]6 Y0 A+ T
- </ol>7 e. T& Z1 `4 u/ E' t
- </div>
* v' S. E) Q" Q- C( F, P5 \. i1 G$ {- @ -
& D t! w* j( _0 j9 q. ~1 D$ I4 Q - <script>
+ L, A( ]/ Y: ^; ^ - new Vue({
0 f5 u" Z$ ]5 O) ?& @, Z y - el: '#app',
3 N e7 r) K, C% Y% W/ T - data: {5 |) H2 C( `8 m* S$ D U
- sites: [6 j y+ K f6 i Q1 z
- { name: 'Runoob' },
( V/ ]5 B3 ], R+ ~( ? - { name: 'Google' },
; K, T, ?, y# O - { name: 'Taobao' }6 e% u. g8 z% k/ C% ]& {
- ]
! O+ B$ J1 w& S& \" { - }; \9 u2 Z$ q: L6 v) b" F
- }); A- A' h( u, R9 _* _4 i" U2 y C
- </script>
/ |- ^9 n" ?3 |6 T8 U& E7 Q8 f( ]
模板中使用 v-for：
v-for* T% b' I8 V4 ]3 d
- <ul>' @9 @2 H1 T9 y2 K# W; t, x! K
- <template v-for="site in sites">$ Z6 |& q/ [/ ]$ ~. p- L, W
- <li>{{ site.name }}</li>. {9 B( { P' d5 X% Q7 [" D
- <li>--------------</li>9 c$ G9 W9 u+ z: c3 J
- </template>5 J7 C2 m8 Q: D8 j+ p4 g8 O: F
- </ul>
v-for 可以通过一个对象的属性来迭代数据：
v-for
- J: I9 ^; W* ~' y! @- _- <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;">
; J3 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;">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;">! r; G, R* V, \8 V7 j
- </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;">8 H$ B/ e1 N9 ~* l5 d9 j
- {{ value }}
% w. o' j0 P( i" 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-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;">
1 M k( Z' x/ I* D2 S! 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;">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;">
: B6 F5 ]) W$ h2 h* u' }; Q6 B0 d; 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;">
8 l! e( S' Q: K5 P5 b! L -
+ g2 e- z2 {; J$ P6 O! ?- |# ^. U5 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;">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;">
+ |0 E" l7 y' @& l& J9 I/ m - new Vue({
" Y8 b1 y/ c, D6 b - el: '#app',6 g' |& M" k1 L- ~. K
- data: {& k# V! S8 X% o/ C1 x/ \; U1 {/ Z
- object: {
; C. r1 ^3 y0 ~( i. h - name: '菜鸟教程',
+ r+ A5 l6 T$ w3 p3 `. r8 Y ]6 i$ k: @ - url: 'http://www.runoob.com',1 G6 K+ t$ t- ~$ A( a- S
- slogan: '学的不仅是技术，更是梦想！'
8 [. ?' t5 Q0 ]. D4 m& | - }
* [& w7 x6 a0 ^% Z, `. p - }
' a- g9 i `7 q1 }2 \$ C - }), A& I. Q" L( n/ F S8 D3 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-for9 |& f, y1 N8 v6 k0 Q" a( f
/ M3 K1 @- i0 H0 u. c& y9 v% M' ?+ {7 b- <div id="app">* x- m# _3 [) r! S. P
- <ul>
5 \+ X( I# E# B' F5 i0 Z- z# ^, l - <li v-for="(value, key) in object">$ X2 }- H4 }6 s* T- j
- {{ key }} : {{ value }}) A. d6 ]0 E; v" c7 j6 L8 i2 d
- </li>/ G, ~+ P4 [0 a9 ` j
- </ul> \5 w, ~& d4 \ Z) H
- </div>
第三个参数为索引：
v-for
: T W% A7 p6 L. E* d, n) z: U; C0 x# _# `% g5 y# W
- <div id="app">
! y/ ?. a# `) N5 I6 }$ T - <ul>
6 `8 [% j. p$ B. c& x - <li v-for="(value, key, index) in object">+ P8 Y' d% Y. V K) j
- {{ index }}. {{ key }} : {{ value }}+ P6 |, Y' a2 i8 k- t& c% m6 N
- </li>
- b$ d; \, g/ M0 g' }' [ - </ul>/ h$ r X* {6 U
- </div>
v-for 也可以循环整数
v-for
! F" m2 f, b7 X
4 Q0 C3 \. j4 M8 f9 _- <div id="app">
7 ], I# J5 f# i8 @ - <ul>
+ `: v# M/ V R - <li v-for="n in 10">7 H% y: _! |: N( `% G
- {{ n }}. P+ b- E2 h+ r: j0 ?) d9 A
- </li>
4 U7 y! F4 M e1 F- n - </ul>
' V/ \& a6 z7 S1 I7 ~ - </div>
1 p2 N" i9 X2 w) }, E" A7 @5 ]8 x% f5 E1 X
1 q9 y: O. J5 t8 ]; X
| 欢迎光临 cncml手绘网 (http://bbs.cncml.com/) |
Powered by Discuz! X3.2 |