vue v-for展示元素分两栏 中间使用分割线

1.效果展示:

2.代码展示:

<template><div class="container"><div class="column" v-for="(item, index) in items" :key="index"><div class="item">{{ item }}</div><div v-if="index % 2 !== 0" class="divider"></div></div></div>
</template><script>
export default {data() {return {items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5']};}
};
</script><style scoped>
.container {display: flex;flex-wrap: wrap;}.column {flex: 0 0 50%; /* 每个元素占据50%的宽度 */max-width: 50%;padding: 10px;box-sizing: border-box;position: relative;
}.item {background-color: #f0f0f0;padding: 20px;margin-bottom: 10px;
}.divider {position: absolute;top: 0;bottom: 0;width: 1px; /* 分割线的宽度 */background-color: #ccc; /* 分割线的颜色 */margin-left: -10px;
}
</style>

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

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

相关文章

注册安全分析报告:东方航空

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 暴力破解密码&#xff0c;造成用户信息泄露短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造成亏损无底洞 …

scrapy分布式、断点续连爬虫开发框架RedisSpider使用教程

一、爬虫文件 使用RedisSpider为继承父类&#xff0c;添加redis_key import scrapy from ..items import NewsItem from scrapy_redis import spidersclass CbsnewsSpiderSpider(spiders.RedisSpider):name "abc_spider"# allowed_domains ["www.abc.com"…

LeetCode 394, 61, 100

目录 394. 字符串解码题目链接标签思路代码 61. 旋转链表题目链接标签思路代码 100. 相同的树题目链接标签思路代码递归版前序遍历层序遍历 394. 字符串解码 题目链接 394. 字符串解码 标签 栈 递归 字符串 思路 本题可以使用两个栈来解决&#xff0c;一个栈 timesStack …

开源安全态势感知平台Security Onion

简介 Security Onion是一款由安全防御人员为安全防御人员构建的免费开放平台。它包括网络可见性、主机可见性、入侵检测蜜罐、日志管理和案例管理等功能。详细信息可以查看官网Security Onion Solutions 在网络可见性方面&#xff0c;Security Onion提供了基于签名的检测&…

【实战指南】Spring Boot项目:一键式RabbitMQ集成与可靠性配置

文章目录 Springboot项目中快速引入Rabbit MQ通用做法由来引入MQ目的步骤总结1.引入MQ的目的2.配置要点3.实现过程4.扩展功能 Springboot项目中快速引入Rabbit MQ通用做法 由来 本篇是在做BI项目时尝试引入MQ来优化项目时发现&#xff0c;MQ引入到项目中做法比较类似。变的只…

JAVA:Filer过滤器+案例:请求IP访问限制和请求返回值修改

JAVA&#xff1a;Filer过滤器 介绍 Java中的Filter也被称为过滤器&#xff0c;它是Servlet技术的一部分&#xff0c;用于在web服务器上拦截请求和响应&#xff0c;以检查或转换其内容。 Filter的urlPatterns可以过滤特定地址http的请求&#xff0c;也可以利用Filter对访问请求…

Wireshark抓取HTTP

HTTP请求响应 使用wireshark抓取 本地机器是192.168.33.195&#xff0c;远程机器是192.168.32.129&#xff0c;远程HTTP服务端口是9005 TCP/IP实际共分为4层&#xff0c;抓包信息中可以看到各层的数据&#xff0c;最上面的数据帧包含了所有数据。 附&#xff1a;抓取本地H…

专题四:设计模式总览

前面三篇我们通过从一些零散的例子&#xff0c;和简单应用来模糊的感受了下设计模式在编程中的智慧&#xff0c;从现在开始正式进入设计模式介绍&#xff0c;本篇将从设计模式的7大原则、设计模式的三大类型、与23种设计模式的进行总结&#xff0c;和描述具体意义。 设计模式体…

Docker-compose单机容器集群编排

传统的容器管理&#xff1a;Dockerfile文件 -> 手动执行 docker build 一个个镜像的构建 -> 手动执行 docker run 一个个容器的创建和启动 容器编排管理&#xff1a;Dockerfile文件 -> 在docker-compose.yml配置模板文件里定义容器启动参数和依赖关系 -> 执行dock…

团队高效地使用 Git 进行协同开发

1. 确定工作流程 选择一种合适的 Git 工作流程&#xff0c;如 Git Flow、GitHub Flow 或 GitLab Flow。这里我们以 Git Flow 为例&#xff1a; main 分支&#xff1a;用于生产环境的稳定版本。develop 分支&#xff1a;用于整合所有开发者的功能分支&#xff0c;进行集成测试…

集合的扩展性:通过设计模式增强集合功能

引言 在软件开发中,集合是管理数据集合的常用数据结构。Java集合框架提供了丰富的集合类,但有时这些集合类可能无法满足特定需求。幸运的是,我们可以通过设计模式扩展集合的功能,使其更加强大和灵活。本文将探讨如何通过装饰者模式等设计模式扩展集合的功能,并提供详细的…

使用[Flags]和按位操作符优化C#枚举处理

在C#开发中&#xff0c;我们经常会遇到需要检查多个枚举值的情况。为了使代码更加简洁和可读&#xff0c;我们可以利用[Flags]特性和按位操作符来简化枚举值的比较 public enum EnumShapeType {None 0,PointType,LineType,CircleType,BoxType,RectangleType,SphereType,CutFe…

Android EDLA项目 5G热点打开失败分析

Android EDLA项目 5G热点打开失败分析 文章目录 一、前言二、EDLA 打开5G热点的分析和实现1、现象&#xff08;1&#xff09; 已原生Settings设置打开5G热点&#xff08;关闭拓展性开关&#xff09;&#xff08;2&#xff09;设置band2&#xff0c;channel36 的5G热点信息打开热…

PlantUML-UML 绘图工具安装、Graphviz安装、本地使用/在线使用、语法、图示案例

文章目录 前言本地安装vscode安装插件下载安装Graphviz配置Graphviz环境变量测试 在线使用演示PlantUML语法总结活动图&#xff08;新语法&#xff09;时序图类图用例图其他图 更多相关内容可查看 前言 本篇提供两种使用方式分别为 在线使用地址1&#xff1a;https://www.pla…

在安卓手机上原生运行docker

前言 之前的文章(香橙派5plus上跑云手机方案一 redroid(带硬件加速))在Ubuntu的docker里运行安卓&#xff0c;这里说下怎么在安卓手机下运行docker&#xff0c;测试也可以跑Ubuntu。 想在手机上运行docker想的不是一天两天了&#xff0c;其实很久之前就有这个想法了&#xff…

Docker网络模式和Cgroup资源限制

目录 1、Docker网络 &#xff08;1&#xff09;Docker网络实现原理 查看容器的输出和日志信息 2、Docker 的网络模式 查看docker列表 &#xff08;1&#xff09;网络模式详解 1&#xff09;host模式 2&#xff09;container模式 3&#xff09;none模式 4&#xff09;br…

SpringCloud教程 | 第十篇: 读取Nacos的配置

1、nacos服务器选用 2、test.yaml这一个DataId配置如下&#xff1a; config:name: aabb222 spring:application:name: testdatasource:type: com.zaxxer.hikari.HikariDataSourcedriver-class-name: com.mysql.cj.jdbc.Driverurl: jdbc:mysql://127.0.0.1:3306/hmblogs?useUni…

MongoDB教程(十二):MongoDB数据库索引

&#x1f49d;&#x1f49d;&#x1f49d;首先&#xff0c;欢迎各位来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里不仅可以有所收获&#xff0c;同时也能感受到一份轻松欢乐的氛围&#xff0c;祝你生活愉快&#xff01; 文章目录 引言一、MongoD…

openGauss学习笔记-311 openGauss 数据迁移-MySQL迁移-MySQL语法兼容性评估工具

文章目录 openGauss学习笔记-311 openGauss 数据迁移-MySQL迁移-MySQL语法兼容性评估工具311.1 代码获取311.2 编译插件311.3 运行311.4 举例311.4.1 case 1:311.4.2 case 2:311.4.3 case 3:311.5 结果311.6 原理openGauss学习笔记-311 openGauss 数据迁移-MySQL迁移-MySQL语法…

【鸿蒙OS】【ArkUI】鸿蒙OS UI布局适配终极攻略

鸿蒙OS UI布局适配终极攻略 像素适配大法&#xff0c;此方法也适合Android ArkUI为开发者提供4种像素单位&#xff0c;框架采用vp为基准数据单位。 vp相当于Android里的dp fp相当于Android里的sp 官方是如何定义的呢,如下图 今天我来教大家如何用PX做到ArkUI的终级适配&…