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


Posted in Vue.js onMarch 13, 2022

一、什么是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表示数组的索引

效果如下图所示:

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

注意:最新的版本中已经移除了$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>

效果如下图所示:

Vue.js中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>使用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.js中v-for指令的用法介绍

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
VUE+Element实现增删改查的示例源码
Nov 23 Vue.js
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 Vue.js
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
vue实现轮播图帧率播放
Jan 26 Vue.js
vscode自定义vue模板的实现
Jan 27 Vue.js
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
vue如何使用rem适配
Feb 06 Vue.js
vue首次渲染全过程
Apr 21 Vue.js
vue使用v-model进行跨组件绑定的基本实现方法
Apr 28 Vue.js
Vue中Object.assign清空数据报错的解决方案
Mar 03 Vue.js
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 Vue.js
Vue如何清空对象
Mar 03 #Vue.js
Vue中Object.assign清空数据报错的解决方案
Mar 03 #Vue.js
vue实现移动端div拖动效果
Mar 03 #Vue.js
vue实现滑动解锁功能
Vue全局事件总线你了解吗
Feb 24 #Vue.js
Vue的生命周期一起来看看
Vue的过滤器你真了解吗
Feb 24 #Vue.js
You might like
Zend Framework页面缓存实例
2014/06/25 PHP
php+html5使用FormData对象提交表单及上传图片的方法
2015/02/11 PHP
php操纵mysqli数据库的实现方法
2016/09/18 PHP
Thinkphp整合微信支付功能
2016/12/14 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
php设计模式之代理模式分析【星际争霸游戏案例】
2020/03/23 PHP
百度 popup.js 完美修正版非常的不错 脚本之家推荐
2009/04/17 Javascript
轻轻松松学JS调试(不下载任何工具)
2010/04/14 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
2013/07/10 Javascript
javascript 实现键盘上下左右功能的小例子
2013/09/15 Javascript
javascript使用正则获取url上的某个参数
2014/09/04 Javascript
基于jquery实现简单的手风琴特效
2015/11/24 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
2016/06/24 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
2016/11/21 Javascript
Javascript 实现计算器时间功能详解及实例(二)
2017/01/08 Javascript
JS中去掉array中重复元素的方法
2017/05/26 Javascript
js 发布订阅模式的实例讲解
2017/09/10 Javascript
详解Node.js利用node-git-server快速搭建git服务器
2017/09/27 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
2019/02/20 Javascript
简单了解TypeScript中如何继承 Error 类
2019/06/21 Javascript
layui-table表复选框勾选的所有行数据获取的例子
2019/09/13 Javascript
小程序调用微信支付的方法
2019/09/26 Javascript
JavaScript如何使用插值实现图像渐变
2020/06/28 Javascript
vue添加自定义右键菜单的完整实例
2020/12/08 Vue.js
玩转python爬虫之正则表达式
2016/02/17 Python
python模糊图片过滤的方法
2018/12/14 Python
opencv之为图像添加边界的方法示例
2019/12/26 Python
在 Windows 下搭建高效的 django 开发环境的详细教程
2020/07/27 Python
python进度条显示-tqmd模块的实现示例
2020/08/23 Python
如何在scrapy中集成selenium爬取网页的方法
2020/11/18 Python
css3图片边框border-image的用法
2017/06/30 HTML / CSS
CSS3关于z-index不生效问题的解决
2020/02/19 HTML / CSS
政府班子四风问题整改措施
2014/10/04 职场文书
2015年度党员个人总结
2015/02/14 职场文书
2015新学期开学寄语
2015/02/26 职场文书
Vue项目打包、合并及压缩优化网页响应速度
2021/07/07 Vue.js