vue中v-for总结

最新推荐文章于 2023-01-10 14:33:05 发布
最新推荐文章于 2023-01-10 14:33:05 发布
阅读量154 收藏
点赞数
分类专栏： vue
原文链接：https://blog.csdn.net/xukongjing1/article/details/81584890
版权

Vue指令之 v-for的使用

原创 最后发布于2018-08-11 11:35:33 阅读数 60518 收藏
发布于2018-08-11 11:35:33
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接： https://blog.csdn.net/xukongjing1/article/details/81584890
展开

1.迭代普通数组

  • 在data中定义普通数组

 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     data:{
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
           list:[1,2,3,4,5,6]
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     }
  • 在html中使用 v-for 指令渲染
<p v-for="(item,i) in list">--索引值--{{i}}   --每一项--{{item}}</p>

2.迭代对象数组

  • 在data中定义对象数组

 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     data:{
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
           list:[1,2,3,4,5,6],
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
           listObj:[
    
    
    
   
   
  4. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
             {id:1, name:'zs1'},
    
    
    
   
   
  5. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
             {id:2, name:'zs2'},
    
    
    
   
   
  6. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
             {id:3, name:'zs3'},
    
    
    
   
   
  7. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
             {id:4, name:'zs4'},
    
    
    
   
   
  8. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
             {id:5, name:'zs5'},
    
    
    
   
   
  9. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
             {id:6, name:'zs6'},
    
    
    
   
   
  10. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
           ]
    
    
    
   
   
  11. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     }
  • 在html中使用 v-for 指令渲染
<p v-for="(user,i) in listObj">--id--{{user.id}}   --姓名--{{user.name}}</p>

3.迭代对象

  • 在data中定义对象

 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     data:{
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
           user:{
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
             id:1,
    
    
    
   
   
  4. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
             name:'托尼.贾',
    
    
    
   
   
  5. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
             gender:'男'
    
    
    
   
   
  6. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
           }
    
    
    
   
   
  7. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     }
  • 在html中使用 v-for 指令渲染
<p v-for="(val,key) in user">--键是--{{key}}--值是--{{val}}</p>

4.迭代数字


 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <!-- 注意：如果使用v-for迭代数字的话，前面 count 的值从 1 开始-->
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <p v-for="count in 10">这是第{{count}}次循环
     
     </p>

完整代码：


 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <html>
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     <head>
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    
    
   
   
  4. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     </head>
    
    
    
   
   
  5. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <body>
    
    
    
   
   
  6. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     <div id='app'>
    
    
    
   
   
  7. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     <!--v-for循环普通数组-->
    
    
    
   
   
  8. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     <p v-for="(item,i) in list">--索引值--{{i}}   --每一项--{{item}}
     
     </p>
    
    
    
   
   
  9. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     <br/>
    
    
    
   
   
  10. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     <!--v-for循环对象数组-->
    
    
    
   
   
  11. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     <p v-for="(user,i) in listObj">--id--{{user.id}}   --姓名--{{user.name}}
     
     </p>
    
    
    
   
   
  12. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     <br/>
    
    
    
   
   
  13. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     <!--注意，在遍历对象的键值对的时候，除了有 val 和 key,在第三个位置还有一个索引-->
    
    
    
   
   
  14. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     <p v-for="(val,key) in user">--键是--{{key}}  --值是--{{val}}
     
     </p>
    
    
    
   
   
  15. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     <br/>
    
    
    
   
   
  16. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     <!-- in 后面我们放过数组、对象数组、对象，还可以放数字-->
    
    
    
   
   
  17. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     <!-- 注意：如果使用v-for迭代数字的话，前面 count 的值从 1 开始-->
    
    
    
   
   
  18. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     <p v-for="count in 10">这是第{{count}}次循环
     
     </p>
    
    
    
   
   
  19. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     </div>
    
    
    
   
   
  20. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     </body>
    
    
    
   
   
  21. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <script src="vue.min.js">
     
     
     
     </script>
    
    
    
   
   
  22. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <script>
     
     
    
    
    
   
   
  23. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     var vm = 
     
     new Vue({
    
    
    
   
   
  24. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     el:
     
     '#app',
    
    
    
   
   
  25. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     data:{
    
    
    
   
   
  26. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
          
     
     list:[
     
     1,
     
     2,
     
     3,
     
     4,
     
     5,
     
     6],
    
    
    
   
   
  27. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
          
     
     listObj:[
    
    
    
   
   
  28. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
             {
     
     id:
     
     1, 
     
     name:
     
     'zs1'},
    
    
    
   
   
  29. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
             {
     
     id:
     
     2, 
     
     name:
     
     'zs2'},
    
    
    
   
   
  30. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
             {
     
     id:
     
     3, 
     
     name:
     
     'zs3'},
    
    
    
   
   
  31. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
             {
     
     id:
     
     4, 
     
     name:
     
     'zs4'},
    
    
    
   
   
  32. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
             {
     
     id:
     
     5, 
     
     name:
     
     'zs5'},
    
    
    
   
   
  33. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
             {
     
     id:
     
     6, 
     
     name:
     
     'zs6'},
    
    
    
   
   
  34. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
           ],
    
    
    
   
   
  35. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
          
     
     user:{
    
    
    
   
   
  36. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
            
     
     id:
     
     1,
    
    
    
   
   
  37. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
            
     
     name:
     
     '托尼.贾',
    
    
    
   
   
  38. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
            
     
     gender:
     
     '男'
    
    
    
   
   
  39. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
           }
    
    
    
   
   
  40. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
         }
    
    
    
   
   
  41. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
       });
    
    
    
   
   
  42. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     </script>
    
    
    
   
   
  43. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     </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.csdn.net/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.csdn.net/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.csdn.net/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>
qq_31749421
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue v-for详细使用
技术前端，忠于热爱 @0.活在风浪里
12-06 4万+
目录 定义vue数据❤ vue循环数组❤❤❤❤ vue循环对象❤❤❤❤ 效果❤ 四种创建对象的方法：❤❤❤ 两种创建数组的方法：❤❤❤ 对象的两种取值方式：❤❤❤❤ 数组扁平化❤❤ 声明函数的6种方式 for in 遍历对象的key 和 value❤❤❤ for of 遍历对象的key 和 值（value）❤❤❤ for in / for of 遍历数组 定义vue数据❤ data: { //数组 ...
VUE语法：v-for指令的四种用法
qq_42586648的博客
07-25 2万+
最近在学习VUE，目前酸菜鱼也才刚开始几天，或许是没天赋之前接触框架也很浅显，很多稍难地方学习的不通透，简单的反倒一过就忘记了。于是想要把简单基础逐步简单梳理一遍，以防万一自己连基础的都学不到，分享给大家共同总结学习。 v-for的四种应用方式: 方式一：v-for循环普通数组 //土蛋方法： <p>{{list[0]}}</p> <p>{{list[1...
vue v-for循环的用法
beidaol的专栏
01-06 3118
v-for的in后面可以放普通数组、对象数组、对象和数字 v-for循环的时候，key属性只能使用number或String。 key在使用的时候，必须使用v-bind属性绑定的形式，指定key的值。 在组件中使用v-for循环的时候，或者在一些特殊情况中，如果v-for有问题，必须在使用v-for的同时，指定唯一的 字符串/数字 类型 :key值。 1、v-for循环普通数组 ①...
Vue指令之v-for的使用
m0_62404884的博客
06-05 4858
目录1.v-for循环普通数组2.v-for循环对象数组3.v-for循环对象中的属性 4.v-for循环数字 v-for="(item,i) in list"示例：在vue实例的data中增加一个数组循环数据结果v-for="(item,i) in userList"示例在vue实例的data中增加一个数组循环数组对象结果v-for="(val,key,i) in userList[0]"示例结果注意： 在遍历对象身上的键值对时，除了有 val key 键值对，在第三个位置还有一个索引v-for=“i i
vue之v-for的各种使用
water_java的博客
09-19 3609
vue之v-for的各种使用用 v-for 把一个数组对应为一组元素在 v-for 里使用对象维护状态数组更新检测变异方法 (mutation method)替换数组注意事项对象变更检测注意事项显示过滤/排序后的结果在 v-for 里使用值范围在 上使用 v-forv-for 与 v-if 一同使用在组件上使用 v-for 用 v-for 把一个数组对应为一组元素 我们可以用 v-for 指令基...
Vue中v-for的数据分组实例
11-28
这个例子展示了如何利用Vue的计算属性和`v-for`指令来处理数据分组，并在DOM中进行渲染。这在实际项目中非常有用，尤其是在处理大量数据并需要进行定制化展示的情况下。 总结一下，Vue中实现数据分组的关键点有： ...
使用Vue中 v-for循环列表控制按钮隐藏显示功能
10-17
在Vue.js中，`v-for`指令用于遍历数组或对象，生成一组DOM元素。它是一种非常强大的功能，常用于动态渲染列表。本篇文章将详细讲解如何利用`v-for`循环列表来控制按钮的隐藏与显示，以及如何处理列表内的事件绑定，...
Vue用v-for给循环标签自身属性添加属性值的方法
10-17
总结来说，Vue.js中使用`v-for`给循环标签添加属性值时，需要理解如何正确地动态绑定属性（使用`:`或`v-bind`），以及在处理图片路径时如何确保Webpack能识别和处理这些路径。通过`require()`、`import`或使用`...
VUE中v-model和v-for指令详解
12-07
总结来说，`v-model`和`v-for`是Vue.js中的核心概念，它们帮助开发者轻松实现数据绑定和列表渲染。`v-model`使得双向数据绑定成为可能，而`v-for`则允许我们高效地遍历数据结构并动态生成UI。理解并熟练运用这两个...
vue中 v-for循环的用法详解
11-21
Vue.js 是一个流行的前端JavaScript框架，它提供了许多强大的特性，其中`v-for`指令是用于在模板中进行数据循环渲染的重要工具。本文将详细介绍`v-for`在Vue中的使用方法，包括循环普通数组、对象数组、单一对象以及...
vue v-for的使用案例：课程表
08-05
使用v-for循环展示表格数据，主要是解决平常表格中内容同与不同的问题，显示出与excel展示内容相似的效果。
vue v-for详解
coinisi_li的博客
01-10 6124
为了给 vue 一个提示，以便它能跟踪每个节点的身份，从而在保证有状态的列表被正确更新的前提下，提升渲染的性能。在组件中使用v-for的时候，或者在一些特殊的时候v-for使用有问题的时候，必须在使用v-for的同时指定唯一的字符或者number类型：key值。假设要在一个节点列表abcde的bc之间插入一个新节点f.在添加key属性前，diff算法默认是将c更新成f，d更新成c，e更新成d，最后再插入e。key在使用时只能使用v-bind的属性绑定的形式，指定key的值。为何要添加一个key属性？
#关于用好vue中的v-for循环的方法总结
老衲的少女心i~
08-04 4404
首先，我们来介绍一下，v-for官方文档上的基本用法 官网上：v-for的基本用法 基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression，为当前遍历的元素提供别名： <div v-for="item in items"> {{ item.text }} </div> 另外也可以为数组索引指定别名 (或者用于对象的键)： <div v-for="(item, index) in items"></div> &
vue中v-for指令的用法
qq_43753895的博客
11-21 3172
vue中V-for指令的用法欢迎使用Markdown编辑器语法 欢迎使用Markdown编辑器 在vue中，可以使用v-for指令进行数组的循环遍历。 语法 <ul> <li v-for="item in list">{{item}}</li> </ul> <ul> <li v-for="(item,i) in list">{{i}}-{{item}}</li> </ul> //其中，item为遍历元素的别名
vue遍历数组信息v-for指令
jyn15159的博客
12-18 1743
vue遍历数组信息v-for指令 基本使用 vue 使用v-for指令，遍历数组信息。 语法： <标签 v-for="成员值 in 数组"></标签> <标签 v-for="(成员值,下标) in 数组"></标签> 示例： <div id="app"> <ul> <li v-for="item in color">{{item}}</li> </ul> <ul>
Vue中使用v-for时key的相关问题
Shaoyouiqng的博客
06-10 468
无论是在react或者vue开发中，我们会遇到key的相关报错的烦恼，比如：不用key，或者选择的key不合理。那么今天小编给你分析分析里面的小秘密 1、v-for为啥要用key？ Vue和React的渲染原理都实现了一套虚拟DOM,使我们可以不直接操作DOM元素，只是操作数据就可以重新渲染页面，背后的‘男人’就是高效的Diff算法 Vue和React的Diff算法大致相同，都是用这三大策略Tree Diff、Component Diff、Element Diff,通过这三层依次的遍历比较，使得虚拟D.
vue.js中的v-for输出数组理解
weixin_34327761的博客
08-21 182
<div id="vue"> 　　<ul v-for='js in jss'> 　　<li>{{js.text}}</li> 　　</ul> </div> v-for='js in jss'这一行命令其实就是for in 循环遍历每个数组对象，然后通过{{js.text}}将每个对象的text属性输出 <s...
Vue指令v-for之遍历输出JavaScript数组，json对象的几种方式
热门推荐
mosowe
09-18 9万+
定义数据： &lt;script&gt; new Vue({ el:"#test", data:{ message:"infor", list:["a","b","c","d","e"], web:{
vue中v-for报错
最新发布
09-03
总结起来，要解决Vue中v-for报错的问题，需要确保key属性的值是唯一的。这样可以避免报错，并且提高性能，减少DOM的渲染。<span class="em">1</span><span class="em">2</span><span class="em">3 #### 引用[....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值