Vue中v-for屬性

本文轉載自查看原文 2019-09-16 15:47 1458

一、遍歷數組對象

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <script src="../vue.js" type="text/javascript" charset="utf-8"></script>
 7     </head>
 8     <body>
 9         <div id="app">
10             <p v-for="(item,i) in list"> id：{{item.id}}-----姓名：{{item.name}}-----當前索引：{{i}}</p>
11         </div>
12         <script type="text/javascript">
13             var vm = new Vue({
14                 el: "#app",
15                 data: {
16                     list: [{
17                             id: 1,
18                             name: '張三'
19                         },
20                         {
21                             id: 2,
22                             name: '李四'
23                         },
24                         {
25                             id: 3,
26                             name: '王五'
27                         },
28                         {
29                             id: 4,
30                             name: '趙六'
31                         }
32                     ]
33                 },
34                 methods: {
35 
36                 }
37             })
38         </script>
39     </body>
40 </html>

二、遍歷對象

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <script src="../vue.js" type="text/javascript" charset="utf-8"></script>
 7     </head>
 8     <body>
 9         <div id="app">
10             <!-- 在循環遍歷對象時有val(值)，key(鍵)，還有第三個參數(i):表示其索引位置，可以不寫 -->
11             <p v-for="(val,key,i) in user">{{key}}:{{val}}+++當前索引是：{{i}}</p>
12         </div>
13     </body>
14     <script type="text/javascript">
15         var vm = new Vue({
16             el: '#app',
17             data: {
18                 user: {
19                     id: 1,
20                     name: '傻娟',
21                     gender: '女'
22                 }
23             }
24         })
25     </script>
26 </html>

三、數字迭代

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <script src="../vue.js" type="text/javascript" charset="utf-8"></script>
 7     </head>
 8     <body>
 9         <div id="app">
10             <p v-for="count in 10">這是第{{count}}次循環</p>
11         </div>
12     </body>
13     <script type="text/javascript">
14         var vm = new Vue({
15             el:"#app",
16             data:{
17                 
18             },
19             methods:{
20                 
21             }
22         })
23     </script>
24 </html>

免責聲明！

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

猜您在找 vue v-for 中的key屬性 Vue——v-for中 key 屬性的使用 Vue中的v-for vue中關於v-for性能優化---track-by屬性 17 vue中v-for循環中key屬性的使用 vue中v-for的使用 vue指令v-for和key屬性 v-for中key屬性的作用 vue中v-for循環如何將變量帶入class的屬性名中 Vue用v-for給循環標簽自身屬性添加屬性值