vue v-for 同时遍历两个组数

news/2024/7/11 0:47:30 标签: js, vue, javascript, vue.js, es6

需求:v-for 同时遍历两个数组

应用场景:

在这里插入图片描述

服务器请求到文章信息,对于最近一个七天发表的文章需要显示new图标 ,服务器请求的信息中有文章发表信息,不过需要自己判断是否为最近七天内发表的文章。
1.判断是否为七天内,结果用数组保存
javascript">computed: {
			newIconIsShow: function() {
				let _this = this
				let item = this.itemInfo.articleList
				let arr = []
				for (let i = 0; i < item.length; i++) {
					let res = compareTime(item[i].releaseTime, 99)
					arr.push(res)
				}
				console.log(arr)
				return arr
			}
2.v-for 遍历文章信息
javascript"><div class="list-item" v-for="(item,index) in itemInfo.articleList" :key="index" @click="newsClick(item.id)">
					<div class="item-left">
						<p class="text_p">.&nbsp;{{item.title}}</p>
					</div>

					<div class="item-right">
						<new-icon v-show="newIconIsShow[index]"></new-icon>
						<span class="pubTime">{{item.releaseTime}}</span>
					</div>
				</div>
v-for 遍历发布时间是否为七天内

在这里插入图片描述

总结:

v-for 利用item 遍历一个数组 利用index 遍历另外一个数组


http://www.niftyadmin.cn/n/936369.html

相关文章

【Away3D代码解读】(二):渲染核心流程(简介、实体对象收集)

我之前解析过Starling的核心渲染流程&#xff0c;相比Away3D而言Starling真的是足够简单&#xff0c;不过幸运的是两者的渲染流程是大体上相似的&#xff1b;Starling的渲染是每帧调用Starling类中的render方法&#xff0c;类似的Away3D的渲染是每帧调用View3D类中的render方法…

三样东西能让女人幸福一生

昨天想写东西的时候最先到了“幸福”这个词&#xff0c;我想&#xff0c;并非单纯因为我现在生活得很幸福&#xff0c;而是我觉得对一个女人来说&#xff0c;再没有什么东西比幸福更珍贵&#xff0c;尤其是在今天这个看上去每个人都生活得非常幸福&#xff0c;而每个人却又都在…

nginx 搭建rtmp流媒体所用资源

Linux: 1、nginx安装包&#xff0c;自行下载。 2、nginx_mod_h264_streaming-2.2.7下载 3、nginx-rtmp-module-master下载 Windows: nginx-rtmp-32.exe下载转载于:https://www.cnblogs.com/czrwxw/p/4001693.html

烂泥:apache虚拟主机的学习与应用

本文首发于烂泥行天下。要配置apache的虚拟主机&#xff0c;我们需要分以下几步进行&#xff1a;1、 检查apache虚拟主机模块2、 开启apache虚拟主机功能3、 httpd-vhosts.conf文件详解4、 根据IP配置虚拟主机5、 根据端口配置虚拟主机6、 根据域名配置虚拟主机一、检查apache虚…

Apollo 刨析:Localization

九月 30 2014 11:27 上午 admin 0 Comments 今天我们来看一看Apollo中的Localization Component。 本地化在Apollo中的使用 像这样的代码大家在Apollo中肯定经常见到&#xff0c;那么NullLocalizer.Instance是什么&#xff1f;我们来看一看NullLocalizer。 LocalizationMo…

Ubuntu启动后进入界面时,报错误Could not apply the stored configuration for monitors

一. 问题&#xff1a; Ubuntu启动后进入界面时&#xff0c;报错误Could not apply the stored configuration for monitors&#xff0c;分辨率无法设置 二. 解决&#xff1a; 删除monitors.xml文件 1 sudo rm -f ~/.config/monitors.xml 转载于:https://www.cnblogs.com/cokeke…

static使用方法小结

static使用方法小结 statickeyword是C, C中都存在的keyword, 它主要有三种使用方式, 当中前两种仅仅指在C语言中使用, 第三种在C中使用(C,C中详细细微操作不尽同样, 本文以C为准).(1)局部静态变量(2)外部静态变量/函数(3)静态数据成员/成员函数以下就这三种使用方式及注意事项…

“合规性”是考核IT运维的重要指标

ITSM的绩效考核向来是一个令人头疼的问题&#xff0c;有时就像一团乱麻&#xff0c;既无章可循&#xff0c;又无从下手。其实&#xff0c;只要掌握正确的思想方法&#xff0c;就能拨云见日。“斩乱麻”需“快刀”&#xff0c;“合规性考核”就是斩ITSM绩效考核这团乱麻的快刀。…