Vue v-for 指令详解-优快云博客

Vue指令之 v-for的使用

原创北海之灵最后发布于2018-08-11 11:35:33 阅读数 60518 收藏

发布于2018-08-11 11:35:33

分类专栏： Vue

本文链接： https://blog.youkuaiyun.com/xukongjing1/article/details/81584890

展开

1.迭代普通数组

在data中定义普通数组


 
 
   
   
    
    
   
   
   
   
    
    
     
     data:{
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
           list:[1,2,3,4,5,6]
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     }

在html中使用 v-for 指令渲染

<p v-for="(item,i) in list">--索引值--{{i}}   --每一项--{{item}}</p>

2.迭代对象数组

在data中定义对象数组


 
 
   
   
    
    
   
   
   
   
    
    
     
     data:{
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
           list:[1,2,3,4,5,6],
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
           listObj:[
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             {id:1, name:'zs1'},
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             {id:2, name:'zs2'},
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             {id:3, name:'zs3'},
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             {id:4, name:'zs4'},
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             {id:5, name:'zs5'},
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             {id:6, name:'zs6'},
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
           ]
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     }

在html中使用 v-for 指令渲染

<p v-for="(user,i) in listObj">--id--{{user.id}}   --姓名--{{user.name}}</p>

3.迭代对象

在data中定义对象


 
 
   
   
    
    
   
   
   
   
    
    
     
     data:{
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
           user:{
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             id:1,
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             name:'托尼.贾',
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             gender:'男'
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
           }
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     }

在html中使用 v-for 指令渲染

<p v-for="(val,key) in user">--键是--{{key}}--值是--{{val}}</p>

4.迭代数字


 
 
   
   
    
    
   
   
   
   
    
    
     
     <!-- 注意：如果使用v-for迭代数字的话，前面 count 的值从 1 开始-->
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <p v-for="count in 10">这是第{{count}}次循环
     
     </p>

完整代码：


 
 
   
   
    
    
   
   
   
   
    
    
     
     <html>
    
    
   
   

   
   
    
    
   
   
   
   
    
      
     
     <head>
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    
   
   

   
   
    
    
   
   
   
   
    
      
     
     </head>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <body>
    
    
   
   

   
   
    
    
   
   
   
   
    
      
     
     <div id='app'>
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     <!--v-for循环普通数组-->
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     <p v-for="(item,i) in list">--索引值--{{i}}   --每一项--{{item}}
     
     </p>
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     <br/>
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     <!--v-for循环对象数组-->
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     <p v-for="(user,i) in listObj">--id--{{user.id}}   --姓名--{{user.name}}
     
     </p>
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     <br/>
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     <!--注意，在遍历对象的键值对的时候，除了有 val 和 key,在第三个位置还有一个索引-->
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     <p v-for="(val,key) in user">--键是--{{key}}  --值是--{{val}}
     
     </p>
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     <br/>
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     <!-- in 后面我们放过数组、对象数组、对象，还可以放数字-->
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     <!-- 注意：如果使用v-for迭代数字的话，前面 count 的值从 1 开始-->
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     <p v-for="count in 10">这是第{{count}}次循环
     
     </p>
    
    
   
   

   
   
    
    
   
   
   
   
    
      
     
     </div>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     </body>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <script src="vue.min.js">
     
     
     
     </script>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <script>
     
     
    
    
   
   

   
   
    
    
   
   
   
   
    
      
     
     var vm = 
     
     new Vue({
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     el:
     
     '#app',
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     data:{
    
    
   
   

   
   
    
    
   
   
   
   
    
          
     
     list:[
     
     1,
     
     2,
     
     3,
     
     4,
     
     5,
     
     6],
    
    
   
   

   
   
    
    
   
   
   
   
    
          
     
     listObj:[
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             {
     
     id:
     
     1, 
     
     name:
     
     'zs1'},
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             {
     
     id:
     
     2, 
     
     name:
     
     'zs2'},
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             {
     
     id:
     
     3, 
     
     name:
     
     'zs3'},
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             {
     
     id:
     
     4, 
     
     name:
     
     'zs4'},
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             {
     
     id:
     
     5, 
     
     name:
     
     'zs5'},
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             {
     
     id:
     
     6, 
     
     name:
     
     'zs6'},
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
           ],
    
    
   
   

   
   
    
    
   
   
   
   
    
          
     
     user:{
    
    
   
   

   
   
    
    
   
   
   
   
    
            
     
     id:
     
     1,
    
    
   
   

   
   
    
    
   
   
   
   
    
            
     
     name:
     
     '托尼.贾',
    
    
   
   

   
   
    
    
   
   
   
   
    
            
     
     gender:
     
     '男'
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
           }
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         }
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
       });
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     </script>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     </html>

截图：

                    <li class="tool-item tool-active is-like "><a href="javascript:;"><svg class="icon" aria-hidden="true">
                        <use xlink:href="#csdnc-thumbsup"></use>
                    </svg><span class="name">点赞</span>
                    <span class="count">9</span>
                    </a></li>
                    <li class="tool-item tool-active is-collection "><a href="javascript:;" data-report-click="{&quot;mod&quot;:&quot;popu_824&quot;}"><svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-csdnc-Collection-G"></use>
                    </svg><span class="name">收藏</span></a></li>
                    <li class="tool-item tool-active is-share"><a href="javascript:;" data-report-click="{&quot;mod&quot;:&quot;1582594662_002&quot;}"><svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-csdnc-fenxiang"></use>
                    </svg>分享</a></li>
                    <!--打赏开始-->
                                            <!--打赏结束-->
                                            <li class="tool-item tool-more">
                        <a>
                        <svg t="1575545411852" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5717" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M179.176 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5718"></path><path d="M509.684 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5719"></path><path d="M846.175 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5720"></path></svg>
                        </a>
                        <ul class="more-box">
                            <li class="item"><a class="article-report">文章举报</a></li>
                        </ul>
                    </li>
                                        </ul>
            </div>
                        </div>
        <div class="person-messagebox">
            <div class="left-message"><a href="https://blog.youkuaiyun.com/xukongjing1">
                <img src="https://profile.csdnimg.cn/A/1/E/3_xukongjing1" class="avatar_pic" username="xukongjing1">
                                        <img src="https://g.csdnimg.cn/static/user-reg-year/2x/6.png" class="user-years">
                                </a></div>
            <div class="middle-message">
                                    <div class="title"><span class="tit"><a href="https://blog.youkuaiyun.com/xukongjing1" data-report-click="{&quot;mod&quot;:&quot;popu_379&quot;}" target="_blank">北海之灵</a></span>
                                        </div>
                <div class="text"><span>发布了95 篇原创文章</span> · <span>获赞 217</span> · <span>访问量 29万+</span></div>
            </div>
                            <div class="right-message">
                                        <a href="https://im.youkuaiyun.com/im/main.html?userName=xukongjing1" target="_blank" class="btn btn-sm btn-red-hollow bt-button personal-letter">私信
                    </a>
                                                        <a class="btn btn-sm  bt-button personal-watch" data-report-click="{&quot;mod&quot;:&quot;popu_379&quot;}">关注</a>
                                </div>
                        </div>
                </div>
</article>