vue2页面渲染 两个数据一行 怎么渲染

let  data=[“办公电脑”,“办公纸品”,“个护用品”,“销毁设备”,“桌面文具”,]

 

在 Vue 2 中,你可以使用 ​v-for​ 指令来遍历数据数组,并使用 CSS 来控制每行显示两个数据项。以下是一个简单的示例,展示了如何在 Vue 2 中实现这个需求:

  1. HTML 模板部分
 

<template>

<div class="container">

<div class="row" v-for="(item, index) in chunkedData" :key="index">

<div class="col" v-for="subItem in item" :key="subItem">

{{ subItem }}

</div>

</div>

</div>

</template>

  1. Vue 组件部分
 

<script>

export default {

data() {

return {

data: ["办公电脑", "办公纸品", "个护用品", "销毁设备", "桌面文具"]

};

},

computed: {

chunkedData() {

const chunked = [];

for (let i = 0; i < this.data.length; i += 2) {

chunked.push(this.data.slice(i, i + 2));

}

return chunked;

}

}

};

</script>

  1. CSS 部分
 

<style>

.container {

display: flex;

flex-direction: column;

align-items: center;

}

.row {

display: flex;

justify-content: center;

width: 100%;

margin-bottom: 10px;

}

.col {

flex: 1;

padding: 10px;

border: 1px solid #ccc;

text-align: center;

}

</style>

解释

  1. HTML 模板部分

    • 使用 ​v-for​ 指令遍历 ​chunkedData​,这是通过计算属性 ​chunkedData​ 生成的二维数组。
    • 每个 ​row​ 包含两个 ​col​,每个 ​col​ 显示一个数据项。
  2. Vue 组件部分

    • ​data​ 方法返回原始数据数组。
    • ​computed​ 中的 ​chunkedData​ 方法将原始数据数组分割成每两个元素一组的二维数组。
  3. CSS 部分

    • ​container​ 使用 Flexbox 布局,确保内容居中。
    • ​row​ 也使用 Flexbox 布局,确保每行中的两个 ​col​ 并排显示。
    • ​col​ 设置了一些基本样式,如边框和内边距,以便更好地显示内容。

这样,你就可以在 Vue 2 中实现每行显示两个数据项的效果。

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

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

相关文章

Laravel速率限制:保护API的盾牌

Laravel速率限制&#xff1a;保护API的盾牌 在构建API时&#xff0c;速率限制&#xff08;Rate Limiting&#xff09;是一个关键的安全特性&#xff0c;它能够防止API被滥用或遭受恶意攻击。Laravel框架提供了一种简单而强大的机制来实现API速率限制&#xff0c;确保你的应用程…

C++ Primer:2.6 自定义数据结构

其他章节&#xff1a;C Primer 学习心得 类以关键字struct开始&#xff0c;紧跟着类名和类体&#xff08;类体部分可以为空&#xff09;。类体有花括号包围形成了一个新的作用域。内内部定义的名字必须唯一&#xff0c;可以与类外部定义的名字重复。 类体右侧表示结束的花括号…

通过路由上的参数生成唯一md5和路由上token做验证

前言&#xff1a;有这么一个场景&#xff0c;路由上有很多的参数&#xff0c;同时有一个token字段&#xff0c;通过路由上的mediaId,X-Test-Timestamp,ui_control 这三个字段生成一个md5值&#xff0c;然后和token要、做一个对比&#xff0c;看是否是通过这三个字段生成的token…

鸿蒙语言基础类库:【@system.brightness (屏幕亮度)】

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

MVC、MVP和MVVM这三种设计模式的区别

详谈MVC、MVP 和 MVVM MVC、MVP 和 MVVM 这三种设计模式的区别1. 角色职责2. 数据绑定3. 性能和可测试性4. 复杂性5. 技术依赖6. 综合比较 总结如何选择 MVC、MVP 和 MVVM 这三种设计模式的区别 1. 角色职责 MVC 模型&#xff08;Model&#xff09;&#xff1a;负责数据处理和…

【算法】LRU缓存

难度&#xff1a;中等 题目&#xff1a; 请你设计并实现一个满足 LRU (最近最少使用) 缓存 约束的数据结构。 实现 LRUCache 类&#xff1a; LRUCache(int capacity) 以 正整数 作为容量 capacity 初始化 LRU 缓存int get(int key) 如果关键字 key 存在于缓存中&#xff0c;…

多级表头固定列问题

父级的width&#xff0c;是需要固定的列的width的总和 参考&#xff1a; el-table 多级表头下对应列的固定

1.3Zygote

Zygote 是 Android 系统中一个关键的进程&#xff0c;负责快速创建新应用进程。它的名字来源于生物学中的“合子”&#xff0c;象征着它是所有应用进程的起源。以下是对 Zygote 的详细解析&#xff1a; Zygote 的作用 预加载&#xff1a; Zygote 在系统启动时预加载了一些常用…

JAVA零基础学习1(CMD、JDK、环境变量、变量和键盘键入、IDEA)

JAVA零基础学习1&#xff08;CMD、JDK、环境变量、变量和键盘键入、IDEA&#xff09; CMD常见命令配置环境变量JDK的下载和安装变量变量的声明和初始化声明变量初始化变量 变量的类型变量的作用域变量命名规则示例代码 键盘键入使用 Scanner 类读取输入步骤示例代码 常用方法处…

HBuilder X3.4版本中使用uni-app自定义组件

HBuilder X3.4版本中使用uni-app自定义组件 这是我的小程序页面结构 方式一&#xff1a;导入components 1.创建componets文件&#xff0c;并编写你的组件页面 <template><view class"my-search-container"><!-- 使用 view 组件模拟 input 输入框的样…

无人机区域常见名词

融合空域 是指有其他航空器同时运行的空域。 隔离空域 是指专门分配给无人机系统运行的空域&#xff0c;通过限制其他航空器的进入以规避碰撞风险。 人口稠密区 是指城镇、村庄、繁忙道路或大型露天集会场所等区域。 重点地区 是指军事重地、核电站和行政中心等关乎国家…

前端学习常用技术栈

前端基础&#xff1a;HTML、CSS、JavaScript 前端高级&#xff1a;HTML5、CSS3、JavaScript 语法规范&#xff1a;TypeScript、ECMAScrpit、Eslint、Prettier 前端热门框架&#xff1a;Vue.js、React.js、Angular.js、Bootstrap、Nuxt.js、Svelte.js、Solid.js、Preact.js、Tai…

LintcCode 468 · 对称二叉树【简单 二叉树 递归 Java】

题目 题目链接&#xff1a; https://www.lintcode.com/problem/468/description?showListFetrue&page1&problemTypeId2&tagIds371&orderingid&pageSize50 思路 递归 Java代码 /*** Definition of TreeNode:* public class TreeNode {* public int…

厂家置换电费如何达到最大化收益

新能源行业知识体系-------主目录-----持续更新https://blog.csdn.net/grd_java/article/details/140004020 文章目录 一、电能电费二、同时刻不同厂家置换&#xff0c;不会影响最终电能电费结果三、风险防范补偿和回收机制四、我们的数据如何考虑补偿和回收五、如何利用补偿和…

蓝桥杯14小白月赛题解

直接输出pi/ti,for遍历 #include <iostream> using namespace std; #define int long long int a,b,c ; double t1.00; signed main() {cin>>a;int an0;for(int i1;i<a;i){cin>>b>>c;if(t>c*1.00/b){tc*1.00/b;ani;} }cout<<an<<e…

服务器上有多个nginx,如何知道启动的是哪个?

根据网上查的方案和自己总结的目前是有三种 方案1&#xff1a;链接: 服务器上有多个nginx&#xff0c;如何知道启动的是哪个&#xff1f; 首先ps -ef | grep nginx&#xff0c;获取个pid lsof -p pid&#xff0c;根据输出可以看到启动这个pid的路径&#xff0c;即可知道是哪个…

【车载开发系列】GIT教程---如何使用GUI来提交变更

【车载开发系列】GIT教程—如何使用GUI来提交变更 GIT教程---如何使用GUI来提交变更 【车载开发系列】GIT教程---如何使用GUI来提交变更一. 使用Git GUI的好处二. 使用GUI克隆出一个已有仓库 一. 使用Git GUI的好处 在软件开发中&#xff0c;Git通常用于管理和操作版本控制系统…

linux-arm ubuntu18.04 qmqtt5.12.6 编译部署

安装 qt 查看qt 版本 &#xff1a; qmake -v 下载对应版本 qmqtt 解压下载的mqtt文件 进入qmqtt xxx/src 目录 在qt 安装目录中创建QtMqtt文件夹&#xff0c; &#xff0d; x86平台qt 默认目录为 /usr/include/x86_64-linux-gnu/qt5 &#xff0d; arm平台qt 默认目录为/us…

Python 从PDF中提取图片和图片信息(坐标、宽度和高度等)

目录 使用工具 Python从PDF的特定页面中提取图片 Python从PDF文档中提取图片 Python从PDF中提取图片的坐标、宽度和高度等信息 PDF文件作为一种广泛使用的电子文档格式&#xff0c;不仅包含文字信息&#xff0c;还可能包含各种图片、图表等视觉元素。在某些场景下&#xff…

【Linux】安装PHP扩展-Swoole

说明 本文档是在centos7.6的环境下&#xff0c;安装PHP7.4之后&#xff0c;安装对应的PHP扩展Swoole。 一、swoole简述 Swoole 是一个为 PHP 设计的高性能的异步并行网络通信引擎&#xff0c;它以扩展&#xff08;extension&#xff09;的形式存在&#xff0c;极大地提升了 …