vue去掉循环数组中的最后一组的某个样式style/class

news2025/1/6 19:56:51

vue去掉循环数组中的最后一组的某个样式style/class

需求:要实现这样的排列

在这里插入图片描述

现状

在这里插入图片描述

发现,最后一个格子并没有跟下面绿色线对齐。

最后发现 是因为 每个格子都给了 margin-right:36px,影响到了最后一个格子
所以要 将最后一个格子的margin 属性去掉

  <div v-for="(item, index) in exportData.slice(3, 8)" :key="index">
      <div class="devicePart rectImg defaultrectImg"
:class="index === exportData.slice(3, 8).length - 1 ? '' : 'murightPart'">
        <div class="deviceTitle">{{ item.name.slice(0, 2) }}</div>
           <div class="deviceTitle">{{ item.name.slice(2, 5) }}</div>
       </div>
     </div>
 </div>

css

 .muPart {
    display: flex;
  }

  .murightPart {
    margin-right: 36px;
  }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/953776.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

安装并使用srs直播

一、安装srs sudo docker run -d -p 1935:1935 -p 1985:1985 -p 8080:8080 --name srs registry.cn-hangzhou.aliyuncs.com/ossrs/srs:v4.0.34二、vue展示 1、引入库 npm install --save flv.js2、导包 import flvjs from "flv.js";3、完整案例 <template><…

Python中的迭代器和生成器介绍

一、迭代器&#xff08;Iterators&#xff09; 迭代器是Python中用于遍历数据集合的一种机制。它是一个实现了迭代协议的对象&#xff0c;可以通过iter()函数来获得迭代器。迭代器需要实现两个方法&#xff1a;__iter__()和__next__()。其中&#xff0c;__iter__()返回迭代器自…

NI RF 无线设计与测试产品 ,你所需要了解的一切

无线设计与测试 随着无线通信的界限不断突破&#xff0c;NI专门针对快速原型验证和生产测试提供了各种软件无线电设备、发生器、分析仪和收发仪。 矢量信号收发仪 VSTRF信号发生器软件无线电 USRP网络分析仪频谱和信号分析仪RF和微波开关功率传感器RF信号调理 矢量信号收发仪…

大数据精准营销怎么满足用户的个性化需求?

近年来在AI和媒体的带动下&#xff0c;大数据分析不断介入&#xff0c;各行各业都开始陆续依仗大数据营销这棵大树&#xff0c;以此来更加高效、便捷、智能、精准的服务于用户。 这就像追求恋人一样&#xff0c;投其所好方能成为眷属。 大数据精准营销的好处&#xff1a; 相…

SOC总线学习记录之ICB(Internal Chip Bus)

蜂鸟E203总线&#xff1a; 采用自定义总线协议 ICB&#xff08;Internal Chip Bus&#xff09;&#xff0c;该总线用于蜂鸟 E203 内核内部使用&#xff0c;同时也可作为 SoC 中的总线使用。 ICB 总线的初衷是为了能够尽可能地结合 AXI 总线和 AHB 总线的优点&#xff0c;兼具高…

如何写出更优雅的CSS代码?

CSS&#xff08;全称Cascading Style Sheets&#xff0c;层叠样式表&#xff09;为开发人员提供声明式的样式语言&#xff0c;是前端必备的技能之一。基于互联网上全面的资料和简单易懂的语法&#xff0c;CSS非常易于学习&#xff0c;但其知识点广泛且分散&#xff0c;很难做到…

阿里云上linux服务器安装tomcat及vuepress2搭建博客部署

一、准备材料 2年前白嫖了试用期的服务器玩了一阵子&#xff0c;到期了&#xff0c;重新购买一个服务器&#xff0c;再次记录一下过程&#xff0c;有需要的可以参考 配置参数&#xff1a;1核2G 贷款1M 阿里云服务器、MobaXterm、jdk1.8、tomcat8.5.78 安装参数&#xff1a…

HP惠普星15青春版/惠普小欧笔记本电脑15s-du1008tx原装出厂Win11系统

适用型号&#xff1a;15s-du1007tx、15s-du1008tx、15s-du1009tx、15s-du1010tx、15s-du1011tx、15s-du1012tx、15s-du1013tx 自带所有驱动、出厂主题壁纸LOGO、Office办公软件、惠普电脑管家等预装程序 所需要工具&#xff1a;32G或以上的U盘 文件格式&#xff1a;ISO 文件大…

JS返回NodeList和HTMLCollection详解

HTML DOM 集合 (Collection) 概述 HTML DOM 集合 (Collection) 是一组 HTML 元素&#xff0c;这些元素可以通过 JavaScript 代码进行访问和操作。HTML DOM 集合通常由一个或多个 HTML 元素组成&#xff0c;并提供了访问和操作这些元素的方法。HTML DOM 集合在 JavaScript 中非常…

加速通导融合,中国在精准定位领域脱颖而出

近日&#xff0c;上海正式发布“5G揽海”行动计划&#xff0c;旨在构建陆海空天一体化海洋网络&#xff0c;加快建设基于“北斗5G”的超高精定位网的海洋新型基础设施&#xff0c;赋能数字经济时代下航运的高质量发展。 这是中国数字经济蓬勃发展下的一个小缩影。今年以来&…

【LeetCode算法系列题解】第26~30题

CONTENTS LeetCode 26. 删除有序数组中的重复项&#xff08;简单&#xff09;LeetCode 27. 移除元素&#xff08;简单&#xff09;LeetCode 28. 找出字符串中第一个匹配项的下标&#xff08;简单&#xff09;LeetCode 29. 两数相除&#xff08;中等&#xff09;LeetCode 30. 串…

骨传导耳机危害是什么?是否会影响听力?

如果说正确的使用骨传导耳机是没有危害的&#xff0c;他也并不会像其他人说的会影响听力&#xff0c;相反骨传导耳机比其他类型的耳机更能保护听力。 首先骨传导耳机的传声原理很独特&#xff0c;借用人体骨骼来进行传声&#xff0c;首先骨传导振子带动颅骨震动&#xff0c;将…

如何将两个pdf合并成一个?pdf合并技巧分享

在日常工作过程当中&#xff0c;我们经常需要处理一些文件&#xff0c;而文件的处理往往是琐碎的&#xff0c;想要提高工作效率&#xff0c;需要选择一些合适的方法&#xff0c;并掌握一定的技巧&#xff0c;那么&#xff0c;如何将两个pdf合并成一个?pdf合并技巧有哪些呢?接…

virtualbox centos 使用NAT模式上网

新安装了centos7之后&#xff0c;发现无法yum&#xff0c;无法ping外网。ping 外网域名无法ping通。 virtualbox的nat 网卡已经打开了。 需要手动打开centos7的网卡&#xff08;centos7.9&#xff09; 可以通过 ip addr 命令查看网卡地址 1: lo: <LOOPBACK,UP,LOWER_UP>…

现货白银趋势分析指标

在一众分析现货白银市场趋势的技术指标中&#xff0c;ADX以它的独特优势&#xff0c;赢得了一众粉丝的支持。它能够反映市场趋势的强度&#xff0c;这是投资者需要知道的重要信息。了解趋势的强度&#xff0c;能够让交易者对自己所采取的交易策略更有信心。毕竟做现货白银交易&…

移动硬盘数据怎么加密?移动硬盘加密软件怎么选?

移动硬盘是一种比较常见的移动储存设备&#xff0c;可以帮助我们储存很多重要数据。那么移动硬盘中的重要数据该怎么加密呢&#xff1f;下面我们就来了解一下。 ​移动硬盘加密方法 移动硬盘的加密方法一般分为两种&#xff0c;一种是硬件加密&#xff0c;另一种则是软件加密。…

Compose学习 - 环境配置及compose、kotlin插件、gradle、AndroidStudio版本对应关系

最近学习Compose&#xff0c;一开始学习的Compose版本是1.1.1&#xff0c;学习的过程中发现&#xff0c; LazyHorizontalGrid这个方法只有在1.2.0以后版本才支持。 想着既然要升级&#xff0c;直接用最新的好了。后面按照官网建议&#xff0c;下载了最新的AndroidStudio&#…

[Spring Boot] 开发时可以运行,但Maven打包后,无法运行

问题&#xff1a;开发过程中一切正常&#xff0c;但在打包后&#xff0c;使用java -jar运行jar包时报错 Exception in thread "main" java.lang.UnsupportedClassVersionError: org/springframework/boot/loader/JarLauncher has been compiled by a more recent ver…

AIGC生成3D模型探索与实践

本文将以AIGC生成3D模型探索与实践为主题&#xff0c;结合电商平台的应用需求&#xff0c;探讨如何利用AIGC技术实现3D模型的个性化生成、大规模生产和快速推广&#xff0c;以及其对于电商行业的推动作用。 背景 随着电商平台的兴起&#xff0c;3D模型已经成为展示商品的重要手…

JVM垃圾回收算法和CMS垃圾收集器

目录 判断一个对象是否死亡&#xff1f; 1、引用计数法 2、可达性分析算法 三色标记 垃圾收集算法 1、分代收集理论 2、垃圾回收算法 标记-清除 标记-复制 标记-整理 CMS&#xff08;Concurrent Mark Sweep&#xff09;收集器 CMS垃圾收集器步骤 CMS垃圾收集器优…