cncml手绘网
标题: 循环语句 [打印本页]
作者: admin 时间: 2018-7-4 10:56
标题: 循环语句
循环使用 v-for 指令。
v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
v-for 可以绑定数据到数组来渲染一个列表：
v-for 指令
4 b1 ?$ t) K. {- <div id="app">
7 R9 r& ]5 H' m7 a. B+ } - <ol>
( \" _6 r) @* b - <li v-for="site in sites">
3 f' V1 j4 [6 o7 J! c3 O# p - {{ site.name }}$ Z0 G1 J6 R2 A* `& j6 j
- </li>
8 P: V: m. z0 |3 C( P( F - </ol>5 ~% V8 r4 v6 c0 y% W4 E5 L- a5 G
- </div>
3 v, a6 F+ J5 `6 z* N; s -
* I# b: F# M# L2 C7 N; S M4 ] - <script>" b! V# j' D5 J4 N5 o
- new Vue({; h9 w) B: x+ r( I
- el: '#app',
+ C% K" a9 G: k0 ?% j - data: {4 ?+ D: {7 h3 p8 `
- sites: [
& @: b( B. S5 g# `* ^ [ - { name: 'Runoob' },& J% t0 N* q, O$ `$ ?" `, n
- { name: 'Google' },
/ H: O# Z5 [6 n% N5 b ?4 l - { name: 'Taobao' }- ?5 y, b2 r+ o
- ]
/ F" M# M9 v# S' n - }
& S d# D9 _- _% t4 N! \! k - })
+ |1 v1 J/ r) t: z- |2 ?4 N - </script>
$ Q; q5 x2 }. M. g: H% B
模板中使用 v-for：
v-for* Y" F. a) ~, E
- <ul>; j! e- C# h/ _
- <template v-for="site in sites">$ q6 {+ L6 |) |$ C0 n
- <li>{{ site.name }}</li>
+ l; ~6 _9 r; h$ ?5 K' F% j - <li>--------------</li>; \: J; F8 t) ], V' j
- </template>1 m6 u, q! c; W1 }& M+ a
- </ul>
v-for 可以通过一个对象的属性来迭代数据：
v-for
4 Y( D' I( o, y2 [2 v9 L) c+ L, p5 f- <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;">
3 r& q- F8 U. q4 \1 ?( ~0 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;">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;">6 q+ Q9 b: ?* ~
- </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;">
+ M- |' c0 m. P9 P4 E/ x - {{ value }}
3 V" B7 u m, x3 G9 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;">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;">
- C: n- [2 |9 M5 O v+ 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;">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;"> n; C+ c4 S' T. `* d6 L s$ 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;">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;">
# d! x8 R- T- b5 e -
4 p* P# ?0 p1 r+ ~4 E" h1 a8 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;">/ @' o: X! N) [$ k
- new Vue({
+ f# I2 t0 U' I" w - el: '#app',
8 @8 ]0 ^& R/ H; ~4 h1 k2 w - data: {, w. }% C/ y8 g0 {$ ]2 f
- object: {( E4 j7 ?5 t- b. k9 g' a# u4 U
- name: '菜鸟教程',, ~9 H. c" b$ }/ b+ D, u
- url: 'http://www.runoob.com',5 j7 ^9 y% S+ P9 }
- slogan: '学的不仅是技术，更是梦想！'
0 b) z# V. q& ]- G+ i) Z - }1 U! b! k/ E2 y0 t1 e6 }
- }
! R5 f6 z Y8 W6 k - })
+ B3 L1 Z# [1 i2 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;">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
7 B L1 f, Z9 i( I A2 r9 A
- \# u2 i8 ~$ B- <div id="app">
0 S& Z* U$ K5 F' w' d - <ul>
, N2 c5 _7 }$ ~# W - <li v-for="(value, key) in object"> v; }( f9 r, |$ n; P) c
- {{ key }} : {{ value }}! M+ Z! F, V" I3 v
- </li>
% l' @4 y; |% {- R! I - </ul>. M8 V3 E6 [/ A* r5 A5 v# k" X
- </div>
第三个参数为索引：
v-for% X% b0 L3 u8 X
0 ?, o* ]6 v2 j$ K- <div id="app">( S+ L0 H) N J1 ~) R, O9 g. B
- <ul>5 K" ?3 ]; `$ M! n
- <li v-for="(value, key, index) in object">
% J6 Y( `- v2 P4 b - {{ index }}. {{ key }} : {{ value }}
- o5 O8 n2 q% `& S7 t - </li>* `& J) k7 v! x3 t8 M# u! r
- </ul>
- Z# Q0 S, u ^ K B - </div>
v-for 也可以循环整数
v-for
/ ~) v1 f) ^4 r/ t( P7 J9 m k% M% W7 Y
- <div id="app">
/ {( _4 T% x/ U' g0 M V - <ul>" L; [3 V: k& x9 y& T
- <li v-for="n in 10">
6 o/ N7 J8 s4 T$ J, p3 A - {{ n }}% z3 U7 s" ]& W C5 ~0 p
- </li>2 n5 e4 ?4 k; ?* O" H7 I
- </ul> a8 I6 E. V0 |+ W
- </div>
+ E- _( e- n1 f1 D. Q3 v+ r5 {" k+ [. S6 w
1 @% b% P" f9 ]
" ^, R- ~; B9 ]* B4 W
| 欢迎光临 cncml手绘网 (http://bbs.cncml.com/) |
Powered by Discuz! X3.2 |