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

news2024/9/22 7:10:26

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.coloradmin.cn/o/1934548.html

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

相关文章

在 K8s 上使用 KubeBlocks 提供的 MySQL operator 部署高可用 WordPress 站点

引言 WordPress WordPress 是全球最流行的内容管理系统&#xff08;CMS&#xff09;&#xff0c;自 2003 年发布以来&#xff0c;已成为网站建设的首选工具。其广泛的插件和主题生态系统使用户能够轻松扩展功能和美化外观。活跃的社区提供丰富的资源和支持&#xff0c;进一步…

npm install时卡在sill idealTree buildDeps卡着不动

场景&#xff1a;做导出功能的时候要用上xlsx&#xff0c;正常npm install xlsx --save 问题描述&#xff1a;npm install时卡在sill idealTree buildDeps&#xff0c;&#xff0c;卡着不动 过程&#xff1a;在网上一顿百度试过好多种方法 1、切换taobao的镜像地址 npm conf…

Flink History Server配置

目录 问题复现 History Server配置 HADOOP_CLASSPATH配置 History Server配置 问题修复 启动flink集群 启动Histroty Server 问题复现 在bigdata111上执行如下命令开启socket&#xff1a; nc -lk 9999 如图&#xff1a; 在bigdata111上执行如下命令运行flink应用程序 …

神经网络之多层感知机

目录 一、全连接层&#xff1a;二、单层感知机概念&#xff1a;三、多层感知机概念&#xff1a; 一、全连接层&#xff1a; 在神经网络中&#xff0c;全连接层就是每个神经元都与上一层的所有神经元相连接&#xff0c;即每个神经元都接收上一层所有神经元的输入&#xff0c;并…

Java后端开发(十四)-- Win10安装多版本JDK并随时切换

目录 1. 多版本JDK并随时切换的解决办法 2. jdk17切回jdk8时一直失败的解决办法 3. 测试jdk版本 我目前使用的是window10的操作系统,在环境变量中关于jdk的配置如下: 1. 多版本JDK并随时切换的解决办法 最后一步就是切换 JAVA_HOME 的环境变量的值,就能随意切换jdk的版本…

Amisco供应汽车线圈与Husco是一家私营公司高性能液压和机电部件在汽车和非公路应用的组件设计和制造方面拥有超过 75 年的经验10于年的合作

Amisco和Husco在汽车线圈和高性能液压和机电部件的设计和制造方面合作已经超过10年。 Amisco是一家供应汽车线圈的公司&#xff0c;而Husco则专注于高性能液压和机电部件的设计和制造。 这两家公司在汽车和非公路应用领域拥有超过75年的经验。通过合作&#xff0c;Amisco和Husc…

Go语言并发编程-Goroutine调度

goroutine 概念 在Go中&#xff0c;每个并发执行的单元称为goroutine。通常称为Go协程。 go 关键字启动goroutine go中使用关键字 go 即可启动新的goroutine。 示例代码&#xff1a; 两个函数分别输出奇数和偶数。采用常规调用顺序执行&#xff0c;和采用go并发调用&…

elementUI在手机端使用遇到的问题总结

之前的博客有写过用vue2elementUI封装手机端选择器picker组件&#xff0c;支持单选、多选、远程搜索多选&#xff0c;最终真机调试的时候发现有很多细节样式需要调整。此篇博客记录下我调试过程中遇到的问题和解决方法。 一、手机真机怎么连电脑本地代码调试&#xff1f; 1.确…

2-38 基于matlab的蚁群算法优化无人机uav巡检

基于matlab的蚁群算法优化无人机uav巡检&#xff0c;巡检位置坐标可根据需求设置&#xff0c;从基地出发&#xff0c;返回基地&#xff0c;使得路径最小。可设置蚁群数量&#xff0c;信息素系数。输出最佳路线长度。程序已调通&#xff0c;可直接运行。 2-38 蚁群算法优化无人…

C学习(数据结构)-->单链表习题

目录 一、环形链表 题一&#xff1a;环形链表 思路&#xff1a; 思考一&#xff1a;为什么&#xff1f; 思考二&#xff1a;快指针一次走3步、4步、......n步&#xff0c;能否相遇 step1&#xff1a; step2&#xff1a; 代码&#xff1a; 题二&#xff1a; 环形链表 I…

PolarisMesh源码系列--Polaris-Go注册发现流程

导语 北极星是腾讯开源的一款服务治理平台&#xff0c;用来解决分布式和微服务架构中的服务管理、流量管理、配置管理、故障容错和可观测性问题。在分布式和微服务架构的治理领域&#xff0c;目前国内比较流行的还包括 Spring Cloud&#xff0c;Apache Dubbo 等。在 Kubernete…

22.《C语言》——【如何进行文件操作?】上集

&#x1f195; 开场白 亲爱的读者&#xff0c;大家好&#xff01;我是一名正在学习编程的高校生。在这个博客里&#xff0c;我将和大家一起探讨编程技巧、分享实用工具&#xff0c;并交流学习心得。希望通过我的博客&#xff0c;你能学到有用的知识&#xff0c;提高自己的技能&…

鸿蒙语言基础类库:【@system.prompt (弹窗)】

弹窗 说明&#xff1a; 从API Version 8 开始&#xff0c;该接口不再维护&#xff0c;推荐使用新接口[ohos.prompt]。本模块首批接口从API version 3开始支持。后续版本的新增接口&#xff0c;采用上角标单独标记接口的起始版本。 导入模块 import prompt from system.prompt;…

Python算法实现之排序算法的Python实现详解

概要 排序算法是计算机科学中最基础和最重要的算法之一。它们在数据处理中起着关键作用,广泛应用于搜索、数据分析和优化等领域。本文将详细介绍几种常见的排序算法及其Python实现,包括冒泡排序、选择排序、插入排序、归并排序和快速排序,并通过具体示例代码展示它们的工作…

插画感言:成都亚恒丰创教育科技有限公司

插画感言&#xff1a;笔触间的灵魂对话 在这个快节奏、高压力的时代&#xff0c;我们时常在寻找那些能够触动心灵、让灵魂得以片刻栖息的角落。而插画&#xff0c;这一融合了艺术与情感的独特形式&#xff0c;便如同一股清泉&#xff0c;缓缓流淌进每个人的心田&#xff0c;以…

【iOS】——编译链接和动态链接器

前言 计算机语言分为机器语言&#xff1a;汇编语言&#xff0c;高级语言。 可以将高级语言分为两种&#xff1a;1&#xff0c;编译语言和解释型语言&#xff08;直译式语言&#xff09;。 编译型语言&#xff08;一次性翻译&#xff09; 编译型语言的程序只要经过编译器编译之…

关于dom4j主节点的xmlns无法写入的问题

由于最近需要做一个xml的文件&#xff0c;使用dom4j的时候发现了一个bug&#xff0c;就是我的xmlns根本无法写入到xml的头部标签中。 Element element document.addElement("test"); element.addAttribute("xmlns", "urn:Declaration:datamodel:sta…

小程序js 把链接转换为二维码

GitHub - Rookie-M/weapp-qrcode: weapp.qrcode.js 在 微信小程序 中&#xff0c;快速生成二维码 1.要下载上面地址的插件包 2.引用 import drawQrcode from ../../utils/weapp.qrcode.minonLoad(options) {let that thisconsole.log(JSON.parse(options.info))that.setData…

[word] word表格跨页断开实现教程 #职场发展#媒体

word表格跨页断开实现教程 选中整个word表格 单击鼠标右键&#xff0c;选择“表格属性”选项 切换至“行”标签&#xff0c;找到“允许跨页断行”选项 勾选上“允许跨页断行”&#xff0c;单击“确定”按钮&#xff0c;完成&#xff01; word表格跨页断开实现教程的下载地址&a…

Memcached介绍与使用

引言 本文是笔者对Memcached这个高性能分布式缓存组件的实践案例&#xff0c;Memcached是一种高性能的分布式内存对象缓存系统&#xff0c;用于减轻数据库负载&#xff0c;加速动态Web应用&#xff0c;提高网站访问速度。它通过在内存中缓存数据和对象来减少读取数据库的次数&…