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;造成亏损无底洞 …

LeetCode 394, 61, 100

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

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

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

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…

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…

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

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

Leetcode 2011. 执行操作后的变量值

问题描述&#xff1a; 存在一种仅支持 4 种操作和 1 个变量 X 的编程语言&#xff1a; X 和 X 使变量 X 的值 加 1--X 和 X-- 使变量 X 的值 减 1 最初&#xff0c;X 的值是 0 给你一个字符串数组 operations &#xff0c;这是由操作组成的一个列表&#xff0c;返回执行所有…

C++初学者指南-5.标准库(第一部分)--标准库算法介绍

C初学者指南-5.标准库(第一部分)–标准库算法介绍 文章目录 C初学者指南-5.标准库(第一部分)--标准库算法介绍C的标准算法是&#xff1a;第一个示例组织输入范围自定义可调用参数并行执行(C17)迭代器和范围的类别错误消息命名空间std::ranges中的算法 (C20)算法参数图标相关内容…

linux 安装 RocketMQ 4.7

安装介绍 Centos 7RocketMQ 4.7JDK 1.8 (安装JDK参考)RocketMQ的官网地址&#xff1a; http://rocketmq.apache.orgGithub地址是 https://github.com/apach e/rocketmq 安装操作 下载RocketMQ RocketMQ运行版本下载地址&#xff1a; Rocketmq-all-4.7.1-bin-release.zip …

httpx,一个网络请求的 Python 新宠儿

大家好&#xff01;我是爱摸鱼的小鸿&#xff0c;关注我&#xff0c;收看每期的编程干货。 一个简单的库&#xff0c;也许能够开启我们的智慧之门&#xff0c; 一个普通的方法&#xff0c;也许能在危急时刻挽救我们于水深火热&#xff0c; 一个新颖的思维方式&#xff0c;也许能…

AI大模型新纪元:哪四大趋势引领未来智能革命?

在人工智能热潮持续居高不下背景下&#xff0c;虽然全球AI大模型企业卷参数的激烈程度有所放缓&#xff0c;但大模型仍不断朝着万亿、十万亿参数发展&#xff0c;并推动多模态持续演进以通向AGI。同时&#xff0c;大模型也在朝向轻量化、高效化、垂直多元化发展&#xff0c;进而…

每日复盘-20240718

20240718 六日涨幅最大: ------1--------300713--------- 英可瑞 五日涨幅最大: ------1--------301016--------- 雷尔伟 四日涨幅最大: ------1--------301016--------- 雷尔伟 三日涨幅最大: ------1--------301016--------- 雷尔伟 二日涨幅最大: ------1--------300713----…

Linux LVM扩容方法

问题描述 VMware Centos环境&#xff0c;根分区为LVM&#xff0c;大小50G&#xff0c;现在需要对根分区扩容。我添加了一块500G的虚拟硬盘(/dev/sdb)&#xff0c;如何把这500G扩容到根分区&#xff1f; LVM扩容方法 1. 对新磁盘分区 使用fdisk /dev/sdb命令&#xff0c;进…