Vue.js中v-for指令的用法介绍

更新时间：2022年03月13日 15:15:04 作者：.NET开发菜鸟

这篇文章介绍了Vue.js中v-for指令的用法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

一、什么是v-for指令

在Vue.js中，我们可以使用v-for指令基于源数据重复渲染元素。也就是说可以使用v-for指令实现遍历功能，包括遍历数组、对象、数组对象等。

二、遍历数组

代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--引入vue.js-->
    <script src="node_modules/vue/dist/vue.js" ></script>
    <script>
       window.onload=function(){
           // 构建vue实例
           new Vue({
               el:"#my",// el即element，表示挂载的元素，不能挂载在HTML和body元素上面
               data:{
                      array:[1,2,3,4],//数组
               },
               // 方法
               methods:{

               }
           })
       }
    </script>
</head>
<body>
    <div id="my">
                <div>
                    <h1>下面的使用v-for遍历数组</h1>
                    <div>
                          <h1>只显示值</h1>
                          <ul>
                              <li v-for=" v in array">{{v}}</li>
                          </ul>
                      </div>
                      <div>
                        <h1>显示值和索引</h1>
                        <ul>
                            <li v-for=" (v,index) in array">值:{{v}},对应的索引:{{index}}</li>
                        </ul>
                      </div>
                </div>
    </div>
</body>
</html>

其中index表示数组的索引

效果如下图所示：

注意：最新的版本中已经移除了$index获取数组索引的用法

三、遍历对象

代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--引入vue.js-->
    <script src="node_modules/vue/dist/vue.js" ></script>
    <script>
       window.onload=function(){
           // 构建vue实例
           new Vue({
               el:"#my",// el即element，表示挂载的元素，不能挂载在HTML和body元素上面
               data:{
                      array:[1,2,3,4],//数组
               },
               // 方法
               methods:{

               }
           })
       }
    </script>
</head>
<body>
    <div id="my">
                <div>
                    <h1>下面的使用v-for遍历数组</h1>
                    <div>
                          <h1>只显示值</h1>
                          <ul>
                              <li v-for=" v in array">{{v}}</li>
                          </ul>
                      </div>
                      <div>
                        <h1>显示值和索引</h1>
                        <ul>
                            <li v-for=" (v,index) in array">值:{{v}},对应的索引:{{index}}</li>
                        </ul>
                      </div>
                </div>
    </div>
</body>
</html>

效果如下图所示：

四、遍历数组对象

代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>使用v-for指令遍历数组对象</title>
    <!--引入vue.js-->
    <script src="node_modules/vue/dist/vue.js" ></script>
    <script>
       window.onload=function(){
           // 构建vue实例
           new Vue({
               el:"#my",// el即element，表示挂载的元素，不能挂载在HTML和body元素上面
               data:{
                      lists:[
                          {name:"kevin",age:23},
                          {name:"tom",age:25},
                          {name:"joy",age:28}
                      ]
               },
               // 方法
               methods:{

               }
           })
       }
    </script>
</head>
<body>
    <div id="my">      
          <div>
                <h1>下面的使用v-for遍历数组对象</h1>
                <div>
                      <h1>只显示值</h1>
                      <ul>
                          <li v-for=" list in lists">name值:{{list.name}},age值:{{list.age}}</li>
                      </ul>
                  </div>
                  <div>
                    <h1>显示值和键</h1>
                    <ul>
                        <li v-for=" (list,index) in lists">name值:{{list.name}},age值:{{list.age}}, 对应的键:{{index}}</li>
                    </ul>
                  </div>
            </div>
    </div>
</body>
</html>

效果如下图所示：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

解决vue create 创建项目只有两个文件问题
这篇文章主要介绍了解决vue create 创建项目只有两个文件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-02-02
深入浅出分析vue2和vue3的区别
这篇文章主要介绍了vue2和vue3的区别,较为详细的分析了vue2与vue3的常见区别与使用方法,需要的朋友可以参考下
2023-06-06
在组件中修改vuex中state的具体实现方法
在组件中修改 Vuex 中的 state,根据使用的 Vue 版本（Vue 2 或 Vue 3）不同,有不同的操作方式,但总体思路都是借助 Vuex 提供的 mutations 或 actions 来实现,以下分别介绍两种版本下的具体实现方法,需要的朋友可以参考下
2025-02-02
Vue+NodeJS实现大文件上传的示例代码
常见的文件上传方式可能就是new一个FormData，把文件append进去以后post给后端就可以了。但如果采用这种方式来上传大文件就很容易产生上传超时的问题。所以本文将利用Vue+NodeJS实现大文件上传，需要的可以参考一下
2022-05-05
Ubuntu22.04使用nginx部署vue前端项目的详细教程
这篇文章主要给大家介绍了关于Ubuntu22.04使用nginx部署vue前端项目的详细教程,使用nginx部署前端项目是一篇非常详细的教程,旨在帮助初学者使用Nginx来部署前端项目,需要的朋友可以参考下
2024-03-03
聊聊Vue 中 title 的动态修改问题
这篇文章主要介绍了 Vue 中 title 的动态修改问题，文中通过两种方案给大家介绍了title的传递问题 ,需要的朋友可以参考下
2019-06-06
vue后台项目如何使用router.addRoutes动态加入路由的思路
这篇文章主要介绍了vue后台项目如何使用router.addRoutes动态加入路由的思路，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-06-06
vue时间格式总结以及转换方法详解
项目中后台返回的时间有多种形式,时间戳、ISO标准时间格式等，我们需要转化展示成能看的懂得时间格式,下面这篇文章主要给大家介绍了关于vue时间格式总结以及转换方法的相关资料,需要的朋友可以参考下
2022-12-12
vue3使用particles插件实现粒子背景的方法详解
这篇文章主要为大家详细介绍了vue3使用particles插件实现粒子背景的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-03-03
Vue Router 实现动态路由和常见问题及解决方法
动态路由不同于常见的静态路由，可以根据不同的「因素」而改变站点路由列表。这篇文章主要介绍了Vue Router 实现动态路由和常见问题解决方案,需要的朋友可以参考下
2020-03-03