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://xiahunao.cn/news/3249346.html

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

相关文章

Linux编辑器——vim的使用

目录 vim的基本概念 命令模式 底行模式 插入模式 注释和取消注释 普通用户进行sudo提权 vim配置问题 vim的基本概念 一般使用的vim有三种模式&#xff1a; 命令模式 底行模式和插入模式&#xff0c;可以进行转换&#xff1b; vim filename 打开vim&#xff0c;进入的…

专题四:设计模式总览

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

基于电鸿(电力鸿蒙)的边缘计算网关,支持定制

1 产品信息 边缘计算网关基于平头哥 TH1520 芯片&#xff0c;支持 OpenHarmony 小型系统&#xff0c;是 连接物联网设备和云平台的重要枢纽&#xff0c;可应用于城市基础设施&#xff0c;智能工厂&#xff0c;智能建筑&#xff0c;营业网点&#xff0c;运营 服务中心相关场…

学习react-环境手脚架页面路由

1. 搭建环境 安装node和npm 在下面网址下载node&#xff0c;并安装 https://nodejs.cn/ #检测是否ok node -v npm -v安装react npm install -g create-react-app2. 创建手脚架&#xff08;TypeScript&#xff09; create-react-app my-app --template typescript cd my-a…

CrossKD: Cross-Head Knowledge Distillation for Dense Object Detection

CrossKD&#xff1a;用于密集目标检测的交叉头知识蒸馏 论文链接&#xff1a;https://arxiv.org/abs/2306.11369v2 项目链接&#xff1a;https://github.com/jbwang1997/CrossKD Abstract 知识蒸馏(Knowledge Distillation, KD)是一种有效的学习紧凑目标检测器的模型压缩技术…

huawei USG6001v1学习---信息安全概念

目录 1.什么是分布式&#xff1f; 2.什么是云计算&#xff1f; 3.APT攻击 4.安全风险能见度不足 5.常见的一些攻击 6.交换机转发原理&#xff1f; 7.各层攻击类型 7.1链路层&#xff1a; 7.2网络层&#xff1a; 7.3传输层&#xff1a; 7.4应用层&#xff1a; 1.什么…

Spring-Boot基础--yaml

目录 Spring-Boot配置文件 注意&#xff1a; YAML简介 YAML基础语法 YAML:数据格式 YAML文件读取配置内容 逐个注入 批量注入 ConfigurationProperties 和value的区别 Spring-Boot配置文件 Spring-Boot中不用编写.xml文件&#xff0c;但是spring-Boot中还是存在.prope…

TCP系列(一)-介绍TCP

服务 TCP和UDP同样使用IP提供的服务&#xff0c;但是TCP提供的是面向连接&#xff0c;可靠的字节流服务 面向连接 使用TCP进行通信双方&#xff0c;必须先建立连接&#xff0c;然后进行数据交换 可靠服务 将应用数据分割成固定大小的报文段每次发出报文&#xff0c;会启动定时…

谷粒商城-全文检索-ElasticSearch

1.简介 一个分布式的开源搜索和分析引擎,可以 秒 级的从海量数据中检索 主要功能:做数据的检索和分析(MySQL专攻于数据的持久化存储与管理CRUD达到百万以上的数据MSQL就会很慢,海量数据的检索和分析还是要用ElasticSearch) 用途:我们电商项目里的所有的检索功能都是由Elasti…

STM32智能城市交通管理系统教程

目录 引言环境准备智能城市交通管理系统基础代码实现&#xff1a;实现智能城市交通管理系统 4.1 数据采集模块 4.2 数据处理与控制模块 4.3 通信与网络系统实现 4.4 用户界面与数据可视化应用场景&#xff1a;城市交通管理与优化问题解决方案与优化收尾与总结 1. 引言 智能城…

用EXCEL和python 计算马尔可夫链转移矩阵

目录 目标&#xff1a;用EXCEL和python 计算马尔可夫链转移矩阵 1 用EXCEL计算 1.1 马尔可夫链的基本应用 1.2 具体计算 2 用python计算马尔可夫转移矩阵 2.1 py代码 2.2 运行结果 3 上面2者计算结果相同 目标&#xff1a;用EXCEL和python 计算马尔可夫链转移矩阵 1 用…

<数据集>混凝土缺陷检测数据集<目标检测>

数据集格式&#xff1a;VOCYOLO格式 图片数量&#xff1a;7353张 标注数量(xml文件个数)&#xff1a;7353 标注数量(txt文件个数)&#xff1a;7353 标注类别数&#xff1a;6 标注类别名称&#xff1a;[exposed reinforcement, rust stain, Crack, Spalling, Efflorescence…

StarRocks on AWS Graviton3,实现 50% 以上性价比提升

在数据时代&#xff0c;企业拥有前所未有的大量数据资产&#xff0c;但如何从海量数据中发掘价值成为挑战。数据分析凭借强大的分析能力&#xff0c;可从不同维度挖掘数据中蕴含的见解和规律&#xff0c;为企业战略决策提供依据。数据分析在营销、风险管控、产品优化等领域发挥…

PHP房产中介租房卖房平台微信小程序系统源码

​&#x1f3e0;【租房卖房新选择】揭秘房产中介小程序&#xff0c;一键搞定置业大事&#xff01;&#x1f3e1; &#x1f50d;【开篇&#xff1a;告别繁琐&#xff0c;拥抱便捷】&#x1f50d; 还在为找房子跑断腿&#xff1f;为卖房发愁吗&#xff1f;今天给大家安利一个超…

【.NET全栈】ASP.NET开发Web应用——AJAX开发技术

文章目录 前言一、ASP.NET AJAX基础1、AJAX技术简介2、ASP.NET AJAX技术架构 二、ASP.NET AJAX服务器端扩展1、声明ScriptManager控件2、使用ScriptManager分发自定义脚本3、在ScriptManager中注册Web服务4、处理ScriptManager中的异常5、编程控制ScriptManager控件6、使用Upda…

GPT LangChain experimental agent - allow dangerous code

题意&#xff1a;GPT LangChain 实验性代理 - 允许危险代码 问题背景&#xff1a; Im creating a chatbot in VS Code where it will receive csv file through a prompt on Streamlit interface. However from the moment that file is loaded, it is showing a message with…

vue使用x6画流程图,简单使用

官网 https://x6.antv.antgroup.com/tutorial/getting-started 安装 npm install antv/x6 --save 使用 <template><div>3333<div id"container" style"width: 800px;height: 800px;"></div></div> </template> <…

上海昇腾AI训练营笔记

文章目录 Ascend C简介CANN架构昇腾AI加速卡AI Core内部计算架构抽象AI Core内核计算SPMD核函数编程API编程范式矩阵编程矩阵乘法数据分块 Ascend C简介 Ascend C系列AI处理器适用于计算力需求较低的场景&#xff0c;如智能监控、边缘计算等。提供多种精简模式和高性能模式&am…

推出全新的ZL3079x、ZL3069x、ZL3066x同步器,优化用于5G运输和无线基础设施设备

一、单通道、双通道和三通道IEEE1588/SyncE网络同步器 ZL3079x提供1个、2个和三个独立的组合硬件和软件平台定时通道&#xff0c;包括IEEE 1588-2008精确时间协议栈和同步算法。该设备使用miTimePLL定时技术&#xff0c;为5G传输和无线基础设施设备提供新的改进功能。该器件非…

如何轻松将Squarespace网站迁移到WordPress

Squarespace是一款非常出色的建站CMS工具&#xff0c;旨在帮助用户轻松地创建高品质的网站&#xff0c;它的特点是注重精美的视觉效果和良好的用户体验&#xff0c;在模板的精致度和易用度上都做的非常好。但是它也有一些缺点&#xff0c;Squarespace是一个封闭系统的CMS&#…