使用v-for指令渲染列表

最新推荐文章于 2023-03-28 21:06:49 发布

weixin_30268071

最新推荐文章于 2023-03-28 21:06:49 发布

阅读量257

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/jiguiyan/p/10700932.html

版权

v-for：对集合或对象进行遍历；

使用v-for对数组遍历时：

效果如下：

代码：

<script>
        window.onload= () =>{new Vue({
            el:'#two',
            data:{
                arr:[11,22,33,44,55,66,77]
                
              }
            
})
        }
    </script>
    
    <body>
        <div id="two">
            <ul>
                
                <li v-for="value in arr">{{value}}</li>
            </ul>
        
            
      </div>
    </body>

使用v-for遍历一个对象时：

<script>
        window.onload= () =>{new Vue({
            el:'#two',
            data:{

                 user:{
                     id:'01',
                     name:'bob'
                 }
                }
            })
        }
            
</script>

html:

<div id="two">
            <ul>
                
                
                <li v-for="(v,index,k) in user">{{k}}-{{index}}-{{v}}</li>
            </ul>
        
            
      </div>

使用v-for遍历多个对象的时：

在vue中加入多个对象：

 users:[{id:'01',name:'cidy'},{id:'02',name:'bob'},{id:'03',name:'lucy'},{id:'04',name:'joey'}]

html:使用v-for进行遍历：

<li v-for="(v,index) in users" :key="v.id">{{index}}-{{v.id}}-{{v.name}}</li>

使用v-for进行遍历数组、单个对象以及多个对象总的代码：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>v-for</title>
 6     </head>
 7     <script type="text/javascript" src="../js/vue.js" ></script>
 8     <script>
 9         window.οnlοad= () =>{new Vue({
10             el:'#two',
11             data:{
12 //                arr:[11,22,33,44,55,66,77],
13 //                 user:{
14 //                     id:'01',
15 //                     name:'bob'
16 //                 }
17                 users:[{id:'01',name:'cidy'},{id:'02',name:'bob'},{id:'03',name:'lucy'},{id:'04',name:'joey'}]
18 
19   
20                 }
21             })
22         }
23             
24 </script>
25     
26     <body>
27         <div id="two">
28             <ul>
29                 
30                 <!--<li v-for="value in arr">{{value}}</li>-->
31                 <!--<li v-for="(v,index,k) in user">{{k}}-{{index}}-{{v}}</li>-->
32                 
33                 <li v-for="(v,index) in users" :key="v.id">{{index}}-{{v.id}}-{{v.name}}</li>
34             </ul>
35         
36             
37       </div>
38     </body>
39 </html>