vue 列表渲染 v-for循環

本文轉載自查看原文 2017-05-16 14:50 24214 Vue.js

v-for循環指令類似與html中C標簽的循環，同樣可以遍歷數組，集合。

1、這里演示一下遍歷數組的基本用法，代碼如下

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <script type="text/javascript"  src="vue.js"></script>
 7 </head>
 8 <body>
 9     <div id="id">
10         <p v-for="arr in array">
11             {{arr.course  }}
12             {{arr.name}} 
13         </p>
14     </div>
15 </body>
16 <script>
17     var vm = new Vue({
18         el:"#id",
19         data:{
20             array:[
21                 {course:'java'},
22                 {course:'Vue.js'},
23                 {course:'javaScript'},
24                 {name:'曹操'},
25                 {name:'孫權'},
26                 {name:'劉備'}
27             ]
28         }
29     })
30 </script>
31 </html>

結果：

在控制台里，輸入 id.array.push({ course: '新課程' })，你會發現列表中添加了一個新課程

2、在 v-for 塊中，我們擁有對父作用域屬性的完全訪問權限。 v-for 還支持一個可選的第二個參數為當前項的索引。

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <script type="text/javascript"  src="vue.js"></script>
 7 </head>
 8 <body>
 9     <ul id="app">
10         <li v-for="(p, index) in people"> <!--添加索引-->
11             {{ parentMessage }} --- {{ index }} --- {{ p.name }}
12             <!--訪問父作用域屬性parentMessage-->
13         </li>
14     </ul>
15 </body>
16     <script>
17     var vm = new Vue({
18         el:"#app",
19         data:{
20             parentMessage: '羅貫中',
21             people: [
22                 {name:'曹操'},
23                 {name:'孫權'},
24                 {name:'劉備'}
25             ]
26          }
27     })
28 </script>
29 </html>

輸出結果：

備注：<div v-for="item of items"></div> 用of 代替 in 也是合法的

3、對象迭代 v-for

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <script type="text/javascript"  src="vue.js"></script>
 7 </head>
 8 <body>
 9     <ul id="app">
10         <li v-for="(value,key,index) of object"> <!--添加索引-->
11            {{parentMessage}}---{{key}}{{value}}---{{index}}
12         </li>
13     </ul>
14 </body>
15     <script>
16     var vm = new Vue({
17         el:"#app",
18         data:{
19             parentMessage: '施耐庵',
20             object: {
21                 浪子:'燕青',
22                 花和尚:'魯智深',
23                 鼓上騷:'時遷'
24             }
25          }
26     })
27 </script>
28 </html>

輸出結果：

4、整數迭代 v-for

<div>
  <span v-for="n in 10">{{ n }}</span>
</div>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Vue循環渲染（v-for） vue入門：（v-for指令與列表渲染） vue v-for循環 Vue：循環遍歷（v-for） vue v-for循環的用法 Vue 循環遍歷 v-for vue通過v-for渲染的列表，可以單獨操作的其中的列表的兩種方法 [Vue]條件與循環v-if v-for(二) 關於Vue、element-ui，動態渲染循環v-for，無法輸入 Vue,v-for循環遍歷方式