VUE V-for的数据的循环渲染

最新推荐文章于 2024-05-12 16:55:09 发布
最新推荐文章于 2024-05-12 16:55:09 发布
阅读量4.6k 收藏 13
点赞数 2
文章标签： vue css vue.js html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BiangBaing/article/details/110959397
版权

文章目录

前言

本章主要介绍Vue中V-for指令的使用，V-for指令是VUE中的重要指令，将批量数据渲染至页面使用

提示：以下是本篇文章正文内容，下面案例可供参考

一、V-for基本作用？

  在网页中我们都可以看到很多像下图一样的数据渲染，这些数据都是
  从后台拿到，当我们将他们应用于前端时，不可能为每一条数据都创
  建一个div，div中再嵌套img图片，电影名等。如果有成百上千条这
  样的数据那我们的工作量将非常大，于是就有了v-for

在这里插入图片描述

二、使用步骤

1.V-for基本语法

代码如下（示例）：

<div id = "app">
<ul>
    <li v-for="item in items">
    {{item.id}}
    </li>
</ul>
</div>
<script>
let vm = new Vue({
        el: "#app",
        data: {
            items: [
                {
                    "id": 1,
                    "title": "杀戮天眼",
				 },  
                {
                    "id": 2,
                    "title": "电话",
				},  
            ]
        }
    })
</script>

想要渲染到视图区的哪部分，就在该标签内使用V-for，这里我们的例子是将数据渲染至<li>中

第一个值item是我们的自定义命名
第二个值in是必须要有的，用来链接你的自定义命名与数据名
第三个值items为你想要渲染的数据名。

**{{item.id}}**使我们渲染的id至页面，语法为
{{item.你的自定义命名}}，如果我们想要渲染数据中所有的title至页面只需要把.后面的id换为title即可{{item.title}}

2.案例源码

<style>
        * {
            margin: 5px;
        }

        #app ul {
            padding: 0px;
            text-align: center;
           
        }

        #app ul li {
            display: inline-block;
            font-size: 8px;
        }

        img {
            width: 180px;
            height: 280px;
        }
    </style>
</head>
<script src="../js/vue.js"></script>

<body>
    <div id="app">
        <ul>
            <li v-for="subject in subjects" :key="subject.id">
                <img :src="subject.cover" alt=""><br />
                电影名： {{subject.title}}<br />
                评分： {{subject.rate}}<br />
                <!-- 链接： {{subject.url}}<br /> -->
                ID： {{subject.id}}<br />
            </li></br>
        </ul>
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            subjects: [
                {
                    "rate": "5.7",
                    "cover_x": 527,
                    "title": "杀戮天眼",
                    "url": "https://movie.douban.com/subject/30304769/",
                    "playable": false,
                    "cover": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2561506095.webp",
                    "id": "30304769",
                    "cover_y": 800,
                    "is_new": true
                },
                {
                    "rate": "6.7",
                    "cover_x": 1434,
                    "title": "英勇废柴",
                    "url": "https://movie.douban.com/subject/34663688/",
                    "playable": false,
                    "cover": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2563993939.webp",
                    "id": "34663688",
                    "cover_y": 2048,
                    "is_new": true
                },
                {
                    "rate": "6.0",
                    "cover_x": 1080,
                    "title": "秘密窝点",
                    "url": "https://movie.douban.com/subject/30206909/",
                    "playable": false,
                    "cover": "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2617708810.webp",
                    "id": "30206909",
                    "cover_y": 1600,
                    "is_new": true
                },
                {
                    "rate": "5.9",
                    "cover_x": 1500,
                    "title": "野外圣诞节",
                    "url": "https://movie.douban.com/subject/33394375/",
                    "playable": false,
                    "cover": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2571587874.webp",
                    "id": "33394375",
                    "cover_y": 2222,
                    "is_new": true
                },
                {
                    "rate": "5.6",
                    "cover_x": 2003,
                    "title": "爆裂兄弟",
                    "url": "https://movie.douban.com/subject/27176614/",
                    "playable": false,
                    "cover": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2554603995.webp",
                    "id": "27176614",
                    "cover_y": 2968,
                    "is_new": true
                },
                {
                    "rate": "6.6",
                    "cover_x": 531,
                    "title": "领袖水准",
                    "url": "https://movie.douban.com/subject/27200012/",
                    "playable": false,
                    "cover": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2587577516.webp",
                    "id": "27200012",
                    "cover_y": 755,
                    "is_new": true
                },
                {
                    "rate": "7.8",
                    "cover_x": 1080,
                    "title": "血战摩苏尔",
                    "url": "https://movie.douban.com/subject/34679696/",
                    "playable": false,
                    "cover": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2624892849.webp",
                    "id": "34679696",
                    "cover_y": 1513,
                    "is_new": true
                },
                {
                    "rate": "7.1",
                    "cover_x": 1013,
                    "title": "黑鸟",
                    "url": "https://movie.douban.com/subject/30277288/",
                    "playable": false,
                    "cover": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2617780988.webp",
                    "id": "30277288",
                    "cover_y": 1500,
                    "is_new": true
                },
                {
                    "rate": "7.2",
                    "cover_x": 1280,
                    "title": "我想藏起来",
                    "url": "https://movie.douban.com/subject/30170195/",
                    "playable": false,
                    "cover": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2582179478.webp",
                    "id": "30170195",
                    "cover_y": 1920,
                    "is_new": true
                },
                {
                    "rate": "5.8",
                    "cover_x": 675,
                    "title": "绝命孤帆",
                    "url": "https://movie.douban.com/subject/30319942/",
                    "playable": false,
                    "cover": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2539738483.webp",
                    "id": "30319942",
                    "cover_y": 1000,
                    "is_new": true
                }
               
            ]
        }
    })
</script>

数据部分为豆瓣提供

总结

以上就是今天要讲的内容，希望可以帮到你，有问题评论感谢指出

BiangBaing
关注
  • 2
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue v-for直接循环数字实例
10-16
在Vue中，`v-for` 指令是用于遍历数组、对象或数字的工具，使得我们可以轻松地渲染列表或者进行重复操作。在这个实例中，我们将详细探讨如何使用 `v-for` 直接循环数字。 在Vue中，`v-for` 的基本语法是这样的： `...
五、Vue 中的条件渲染
manba
04-07 118
一、Vue 中的if 系类知道格式就行了，用法和Java等一样 v-if v-if v-else v-if v-else-if v-else<div v-if=""></div> <div v-else-if=""></div> <div v-else=""></div> 二、Vue中的 show v-show...
vue里a标签从后台获取链接并实现跳转
qq_52959651的博客
12-06 3350
vue里a标签从后台获取链接并实现跳转 当我从data里写一个json时，页面渲染循环出json文件，链接可以实现跳转。 代码： <style> #app{ min-width: 1200px; margin: 0px 60px; } #app ul li{ display: inline-block; border: 1px s
2024年前端最全Vue v-for详细使用 + for in 、for of + 数组扁平化(flat），现在web前端面临失业,饱和了吗
最新发布
2401_84447065的博客
05-12 778
由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】vue循环数组vue循环对象效果数组扁平化for in 遍历对象的key 和 valuefor of 遍历对象的key 和 值（value）定义vue数据data: {//数组arr2: [{title: ‘星期一’}, {title: ‘星期二’}, {title: ‘星期三’
vue v-for数据过多，导致dom过多页面卡顿
qq_42250831的博客
03-04 9075
vue v-for数据过多，导致dom过多页面卡顿 在for循环中使用如iview等组件库组件时会生成很多dom节点，当for的数据源长度过大时，会导致mouse事件卡顿。 解决方案：用v-if隐藏公共的组件，hover时再渲染单个组件。 v-show：仅隐藏，仍会生成dom树 v-if：从dom树上删除，显示时重新渲染 ...
vue v-for 渲染大量数据卡顿的优化方案
qq_51574759的博客
03-05 3313
vue 中使用 v-for 渲染大量数据的优化方案 - 动态渲染 前端中我们难免会遇到需要展示大量数据的情况，如果基础数据量过大，那么在初始化组件时，可能会造成严重卡顿，影响用户体验。在我参与的开源项目 swanlab 中，某些情况下需要大量渲染程序日志，最近对其进行了一下优化，将使用方案记录于此。
vue性能优化
欠踹的背影
09-02 378
1、v-for循环列表 ​ 1）指定非下标的唯一key ​ 2）不同时使用v-if 2、图片资源懒加载 ​ 比如：使用v-lazyload 3、路由组件懒加载 // 比如 const Home = () => import(’./pages/Home’) 4、第三方插件按需引入（勿全局引入） 5、数据庞大的数组、对象优化 ​ 1）冻结响应式数组/对象: ​ 如果你有一个巨大的数组或Object，并且确信数据不会修改，使用Object.freeze()可以让性能大幅提升。在我的实际开发
vue踩坑之：v-for和v-if造成重复循环展示
xiaoyuer_2020的博客
12-31 4298
遇到的问题：接口只返回了一组数据，但是在页面展示时却出现了重复渲染，展示了两组商品。代码如下： <div v-if="type == 1" v-for="(item, index) in productList" :key="index">预售：{{item.name}}</div> <div v-else v-for="(item, index) in productList" :key="index">普通商品：{{item.name}}</div> .
解决vue的 v-for 循环中图片加载路径问题
10-18
在Vue.js应用中，`v-for`循环常用于渲染列表数据。然而，在处理图片加载时，尤其是在图片路径与数据动态绑定的情况下，可能会遇到一些问题。本文将深入探讨如何解决Vue的`v-for`循环中图片加载路径的问题。 首先，...
浅谈vue.js中v-for循环渲染
12-29
vue.js 的循环渲染是依赖于 v-for 指令，它能够根据 vue 的实例里面的信息，循环遍历所需数据，然后渲染出相应的内容。它可以遍历数组类型以及对象类型的数据，js 里面的数组本身实质上也是对象，这里遍历数组和对象...
解决vue v-for 遍历循环时key值报错的问题
10-18
4. **组件状态管理**：当`v-for`循环渲染组件时，`key`可以帮助Vue区分不同的组件实例，避免状态混合。 那么，如何解决这个`key`值报错的问题呢？ 1. **使用字符串或数字**：确保你的`key`值是字符串或数字。例如...
在vue的v-for中使用索引index值
01-06
在Vue.js框架中，`v-for`指令是一个非常重要的特性，用于遍历数组或对象，渲染列表或重复的模板。当我们需要在`v-for`循环中跟踪每个项目的唯一标识或执行特定操作时，可以利用其提供的索引`index`值。下面我们将...
vue加载大量数据优化
码农键盘上的梦
08-07 1887
避免在循环中使用复杂的计算或方法：如果在循环中计算复杂的表达式或调用方法，会导致性能下降。综上所述，以上方法可以有效地优化Vue中加载大量数据所形成的列表的性能。使用JSON的数组格式化：在获取数据时将数据进行数组格式化，这样可以避免Vue对数据进行递归观察造成的性能问题。分页加载：不要一次性加载所有的数据，而是分批加载数据，每次只加载当前页需要显示的数据量。虚拟滚动：只渲染当前可见区域的数据，对于不可见的数据使用占位符来代替。避免频繁的数据变更检测：可以使用Vue的。来实现无限滚动加载。
VUE 重复渲染的解决办法
finogeeks的博客
08-18 1523
相信和我一样选择 Vue 框架的主要原因是，它作为当前最流行的 JavaScript 前端框架之一，在轻量、效率、灵活度上面有比较强的优势。但是在实际的项目中深入使用发现，一些合理的技巧可以在一定程度上提升app的性能表现。
vue v-for key不显示重复id，重复数据覆盖之前的数据
qq_27361945的博客
02-22 766
写一个职位列表，获取职位的逻辑重复了，首次获取的5个职位重复了，数组中实际存储了10个职位，有5个是重复的，但前台只显示5个职位，原因是v-for中的 :key=wk._id，v-for二次渲染后5个重复id的职位时，直接将前5个职位覆盖了，所以只显示5条岗位数据，如果换成 :key=index，则不存在重复的index，前台会显示十条岗位数据，包括后5条重复数据。
vue的v-for循环中图片加载路径问题
qq_47648083的博客
11-17 3819
vue的v-for循环中图片加载路径问题 产品要求 要求图片和它的名字一一对应， vue中的img的src可以动态绑定到一个变量上 <template> <div id="app"> <ul> <li v-for ="a,b in data" :key="b"> <img :src="a.url" alt="flowers"> <p>{{item}}</p>
【无标题】关于数据被重复渲染问题，页面把后台返回数据循环渲染了很多次。
gmy00111的博客
12-31 516
遇到了一个bug，页面把后台返回数据循环渲染了很多遍，查看控制台打印数据，后台返回数据没问题，确定是前端问题，作为一个前端小白属实被折磨了好久。 最终把问题定位到 v-if 和 v-for 上面，当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。这意味着 v-if 将分别重复运行于 每个 v-for 循环中，即先运行 v-for 的循环，然后在每一个 v-for 的循环中，再进行 v-if 的条件对比，会造成性能问题，影响速度。 这一点是 Vue 官方的风格指南中明确指出
Vue列表渲染(v-for的使用)
见证自己学习,成长的记录
03-28 2877
v-for指令1.用于展示列表数据2 语法 v-for=(item,index) in(of) xxx :key=“yyy”3 可遍历：数组(用的多)，对象(用的多)，字符串(用的少)，指定次数(用的少)代码奉上DOCTYPE html > < html > < head > < meta charset = "UTF-8" > < title > 初始vue < / title >
Vue 跨平台性能优化十法
腾讯技术工程
10-08 1239
作者：bartonwang，腾讯 IEG 客户端开发工程师Vue 是一套用于构建用户界面的渐进式的 JavaScript 框架。具有体积小，更高的运行效率，双向数据绑定，生态丰富、学习成本...
vue v-for列表渲染
07-08
在Vue中，v-for指令用于循环渲染数组或对象的数据，而key属性则是用来帮助Vue识别每个节点的唯一性，从而提高渲染性能的。当Vue更新DOM时，它会根据key值来判断哪些节点需要更新，哪些节点需要删除，哪些节点需要...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值