首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Vue css js 多行多列实现需求

Vue css js 多行多列实现需求

作者头像
solate
修改于 2023-09-24 11:54:49
修改于 2023-09-24 11:54:49
2.8K00
代码可运行
举报
文章被收录于专栏:solate 杂货铺solate 杂货铺
运行总次数:0
代码可运行

需求

需要实现一个循环来循环元素,每行4个元素

css flex

CSS flex实现多行多列的多种方式

vue v-for实现多行等分布局-三等分

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<template>
  <div >
<!--    <div v-for="item in dataList" class="parent">-->
<!--      <div class="child">{{item.id }}</div>-->
<!--    </div>-->

    <h3><pre><span>1.flex合并属性 </span><span>flex: 1 0 50%;</span></pre></h3>
    <section class="flex-outer flex-attr">
      <article>1</article>
      <article>2</article>
      <article>3</article>
      <article>4</article>
    </section>

    <h3><pre><span>2.基准属性</span><span>flex-basis: 50%;</span></pre></h3>
    <section class="flex-outer flex-basis">
      <article>1</article>
      <article>2</article>
      <article>3</article>
      <article>4</article>
    </section>

    <h3><pre><span>3.设置width</span><span>width: 50%;</span></pre></h3>
    <section class="flex-outer width-attr">
      <article>1</article>
      <article>2</article>
      <article>3</article>
      <article>4</article>
    </section>
  </div>
</template>

<script>
export default {
  data () {
    return {
      dataList: [
        { id: 1, name: 'F1' },
        { id: 2, name: 'F2' },
        { id: 3, name: 'F3' },
        { id: 4, name: 'F4' },
        { id: 5, name: 'F5' },
        { id: 6, name: 'F6' },
        { id: 7, name: 'F6' },
      ]
    }
  },
}
</script>

<style scoped>

.flex-outer {
  display: flex;
  flex-wrap: wrap;
}

.flex-outer article {
  background: limegreen;
  border: 1px solid #eee;
  box-sizing: border-box;
  color: #fff;
  padding: 15px;
}

/* flex合并属性 */
.flex-outer.flex-attr article  {
  flex: 1 0 50%;
}

/* flex-basis */
.flex-outer.flex-basis article {
  flex-basis: 50%;
}

/* 设置width */
.flex-outer.width-attr article {
  width: 50%;
}

pre {
  display: flex;
  justify-content: space-between;
}
</style>

自己实现

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<template>
  <div>
    <div class="wrapper">
      <div class="wrapper-content" v-for="item in dataList">
        <span>{{item.id}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Test',
  data () {
    return {
      dataList: [
        { id: 1, name: 'F1' },
        { id: 2, name: 'F2' },
        { id: 3, name: 'F3' },
        { id: 4, name: 'F4' },
        { id: 5, name: 'F5' },
        { id: 6, name: 'F6' },
        { id: 7, name: 'F6' },
      ]
    }
  },
}
</script>

<style scoped>

.wrapper{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: left;
}
.wrapper-content{
  width: 33%;
}


</style>

有些说css控制有时候不起作用,那么就需要js来控制

js 实现

VUE的for循环一行两列

vue+elementui 实现每行两列循环

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<template>
  <div >
    <div v-for='(item,index) in dataList' v-if='index%2==0'>
      <tr >
        <td style="width: 50px; background: red">
          {{item.id}}
        </td>
        <td v-if='index+1<dataList.length'>
          {{dataList[index+1].id}}
        </td>
      </tr>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      dataList: [
        { id: 1, name: 'F1' },
        { id: 2, name: 'F2' },
        { id: 3, name: 'F3' },
        { id: 4, name: 'F4' },
        { id: 5, name: 'F5' },
        { id: 6, name: 'F6' },
        { id: 7, name: 'F6' },
      ]
    }
  },
}
</script>

<style scoped>

</style>

这种方式虽然可以实现数据换行,但是要写很多逻辑,而且要算好下标,感觉也不是很好

将一维数据转换成二维数组

vue v-for list数据循环 每3或者(n)个一组

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<template>
  <div >
    <div class="wrapper" v-for="(item) in computedList">
      <div class="wrapper-content" v-for="(cell, i) in item" :key="i">
        <div class="flex-outer" style="width: 25%">{{cell.id}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Test',
  data () {
    return {
      dataList: [
        { id: 1, name: 'F1' },
        { id: 2, name: 'F2' },
        { id: 3, name: 'F3' },
        { id: 4, name: 'F4' },
        { id: 5, name: 'F5' },
        { id: 6, name: 'F6' },
        { id: 7, name: 'F6' },
      ]
    }
  },
  computed: {
    computedList() {
      let index = 0;
      let num = 4; // 每行几个元素
      let arr = [];
      for (let i=0; i<this.dataList.length; i++) {
        index = parseInt(i/num);
        if (arr.length <= index) {
          arr.push([]);
        }
        arr[index][i%num] = this.dataList[i];
      }
      console.log(arr)
      return arr;
    }

  },
}
</script>

<style scoped>

.wrapper{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
}
.wrapper-content{
  width: 33%;
}


</style>

这个一维数组转换二位数组算法可以优化,后续补充

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
vue css 实现在盒子中居中对齐
需求 需要在一个盒子内将文字水平垂直居中对齐 实现 <template> <div> <div class="wrapper"> <div class="wrapper-con
solate
2021/03/11
3.4K0
vue css 实现在盒子中居中对齐
全栈之前端 | 6.CSS3基础知识之网页几种布局方法学习(1)
描述: 前面相信大家已经跟着【WeiyiGeek】作者一起学习了CSS基础知识了,并且了解了盒子模型、以及元素的定位浮动方面的知识。现在我们在此基础上继续深入学习CSS布局,它是学习CSS之路上一个重点,是在进行前端开发时常常使用到的,所以说我们需要认真学习,若有不懂的地方可以在文章末尾,以及作者交流群【在公众号回复微信交流群】进行留言交流。
全栈工程师修炼指南
2023/10/31
1.2K0
全栈之前端 | 6.CSS3基础知识之网页几种布局方法学习(1)
vue css 滚动楼层导航定位
理解滚动图 左右结构 <template> <div> <div class="floor-nav"> <ul class="nav-list"> <li
solate
2021/03/05
3.3K0
vue css 滚动楼层导航定位
译|CSS中的间距,前端开发中各种设置间距的优点缺点及实例
如果两个或多个元素很接近,那么用户就会认为它们以某种方式属于彼此。当对多个设计元素进行分组时,用户可以根据它们之间的空间大小来决定它们之间的关系。没有间距,用户将很难浏览页面并知道哪些内容相关而哪些内容无关。
张张
2020/05/12
12.9K0
译|CSS中的间距,前端开发中各种设置间距的优点缺点及实例
CSS Flex 布局
给元素添加display: flex,该元素变成了一个弹性容器(flex container),它的直接子元素变成了弹性子元素(flex item)。
Cellinlab
2023/05/17
1.5K0
CSS Flex 布局
【React】【CSS】【案例】:Flex 弹性盒模型
Flexible Box 模型,通常被称为 flexbox,是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。
WEBJ2EE
2020/04/24
3.1K0
【React】【CSS】【案例】:Flex 弹性盒模型
vue2.0和better-scroll实现左右联动效果
在做移动端商城或者其他页面的时候,经常会遇到左右联动的效果,今天小编vue2.0和better-scroll这个插件一起实现左右联动效果。
小周sir
2019/09/23
1.4K0
vue2.0和better-scroll实现左右联动效果
【Vue.js——小游戏】成语学习(蓝桥杯真题-2279)【合集】
选中 index.html 右键启动 Web Server 服务(Open with Live Server),让项目运行起来。
Rossy Yan
2025/01/25
1470
【Vue.js——小游戏】成语学习(蓝桥杯真题-2279)【合集】
cssjshtml vue.js 组件嵌套demo
components/Users.vue <template> <div class="users"> <h1>hello users</h1> <ul> <li v-for="user in users" v-on:click="user.show=!user.show"> <h2>{{user.name}}</h2> <h3 v-show="user.show">{{user.position}}</h3> </li
葫芦
2019/04/17
2.1K0
CSS3的flex布局
flex的一些属性 CSS3中引入了另一种框--flexbox,flexbox有一些block和inline不同的性质,比如: 自适应子元素(flex item,又称伸缩项目)的宽度 伸缩项目的float,clear,vertical-align属性失效 不能继承flex框,但可以依次设置 可以修改flex流的方向以及布置规则          现在就大体讲述下这个具体属性的表示含义。 设置flexbox的兼容性   将一个容器设置为flexbox(又称伸缩容器)很简单,但是却存在一些兼容性的问题,比如
欲休
2018/03/15
1.5K0
CSS3的flex布局
cssjshtml vue.js 父组件向子组件传值
从App.vue向components/Users.vue传值 App.vue <!-- 1模板:html结构 --> <template> <div id="app"> <app-header></app-header> <users v-bind:users="users"></users> <app-footer></app-footer> </div> </template> <!-- 2行为:逻辑处理 --> <script> // 局部注册组件 impo
葫芦
2019/04/17
2.4K0
CSS 布局_2 Flex弹性盒
弹性盒,是一种布局方式,当页面需要适应不同的屏幕大小以及设备类型时,它依然能确保元素拥有更恰当的排布行为,弹性盒属于 CSS 3 部分,IE9 以下不支持,现代浏览器指的就是 IE9 及以上的浏览器
Nian糕
2018/08/21
1.7K0
CSS 布局_2 Flex弹性盒
vue H5项目:利用vant ui二次封装的选择月份的日历组件
组件通过this.$emit('datebutton',Datenum)把参数传过去。 最终得到的时间格式:如202011
江一铭
2022/06/16
1.9K0
vue H5项目:利用vant ui二次封装的选择月份的日历组件
10分钟理解CSS3 FlexBox
设置父元素的display属性为flex,则子元素都变成flex item,由此可以控制子元素的排列方式、尺寸、间距等;
MudOnTire
2019/05/26
8770
VUE2全家桶精讲
概念:Vue (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架。
HelloWorldZ
2024/03/20
6180
VUE2全家桶精讲
【Vue #2】脚手架 & 指令
在 构建工具(Vite/Webpack )环境下开发Vue,这是最推荐的、也是企业采用的方式
IsLand1314
2025/04/11
1490
【Vue #2】脚手架 & 指令
【Vue组件】表格骨架屏
功能概述:项目里有很多表格,希望表格加载动效好看一点,有多少列就显示多少列在加载,做成公共组件。效果:
用户6256742
2024/05/30
2750
【Vue组件】表格骨架屏
Vue.js 3.0 登录界面实现与常用指令总结
这个登录界面不仅展示了Vue.js的核心功能,还提供了良好的用户体验和现代UI设计。
软件架构师Michael
2025/06/30
1990
CSS 的弹性布局(flex) ,是什么?
新建 index.html 文件,复制下面代码到文件,用浏览器打开 index.html,在调整浏览器窗口大小,即可看到article 元素的大小也跟着改变。
Learn-anything.cn
2021/12/10
1.4K0
Node.js+Mock.js+Vue.js实现接口和上拉加载数据
Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具。 使用 Express 可以快速地搭建一个完整功能的网站。
别盯着我的名字看
2022/06/09
2.8K0
Node.js+Mock.js+Vue.js实现接口和上拉加载数据
相关推荐
vue css 实现在盒子中居中对齐
更多 >
交个朋友
加入前端学习入门群
前端基础系统教学 经验分享避坑指南
加入腾讯云技术交流站
前端技术前沿探索 云开发实战案例分享
加入云开发企业交流群
企业云开发实战交流 探讨技术架构优化
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档