专栏首页solate 杂货铺Vue css js 多行多列实现需求

Vue css js 多行多列实现需求

需求

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

css flex

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

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

<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>

自己实现

<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 实现每行两列循环

<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)个一组

<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>

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 适合 JS 新手学习的开源项目——在 GitHub 学编程

    这里是 HelloGitHub 的《GitHub 上适合新手的开源项目》系列的最后一篇,系列文章:

    HelloGitHub
  • 前后端分离之vue2.0+webpack2 实战项目 -- webpack介绍

    webpack的一点介绍 Webpack 把任何一个文件都看成一个模块,模块间可以互相依赖(require or import),webpack 的功能是把相互...

    smy
  • 2018年各大互联网前端面试题三(阿里)

    王小婷
  • Webpack + vue 之抽离 CSS 的正确姿势

    大部分使用过webpack的朋友都知道,抽离css需要使用到webpack的插件extract-text-webpack-plugin,vue也不例外。

    easonxie
  • Vue隐藏技能:运行时渲染用户写入的组件代码!

    大致说一下项目的背景:我们做了一个拖拽生成报表的系统,通过拖拽内置的组件供用户定制自己的报表形态,但毕竟内置的组件有限,可定制性不高,那么给用户开放一个 cod...

    @超人
  • 微服务[学成在线] day02:CMS前端开发

    由于在学习该项目的过程中发现了原讲义存在的一些问题,所以该笔记基于「学成在线」微服务项目 PDF 讲义进行编写,并且投入了时间去优化了笔记的格式、代码的高亮、重...

    LCyee
  • Vue开发入门看这篇文章就够了

    库,本质上是一些函数的集合。每次调用函数,实现一个特定的功能,接着把控制权交给使用者

    Fundebug
  • 前端框架 jQuery 和 Vue 如何选择?

    不会前端开发的后端不是一个好的后端开发,平时写点小项目可以用得上,先简单了解一下前端这个概念。

    良月柒
  • 用 webpack 4.0 撸单页/多页脚手架 (jquery, react, vue, typescript)

    首先来简单介绍一下webpack:现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时,它会在内部构建一个...

    徐小夕
  • npm 及vue,router,webpack安装 快速起步

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    多凡
  • vue 随记(6):构建的艺术

    做过vue项目的人都知道,当项目越变越大,或者变成多页面应用时,热更新打包速度奇慢无比,每次保存都要几分钟。

    一粒小麦
  • vue项目搭建及基本配置

    准备阶段会将项目环境配置完毕,包含 node、 npm、 webpack和 vue-cli。已经完成的小伙伴可以跳过此步骤看第二阶段。

    流眸
  • Vue2.0 新手完全填坑攻略——从环境搭建到发布

    Homebrew 1.0.6(Mac)、Node.js 6.7.0、npm 3.10.3、webpack 1.13.2、vue-cli 2.4.0、Atom 1...

    onety码生
  • vue 开发常用工具及配置三

    在现在的前端开发中,前后分离、模块化、版本控制、文件合并与压缩、mock数据等,是在大前端开发避不开的概念。在开发的时候,以组件的方式分别开发,在部署的时候又将...

    程序员LIYI
  • 值得关注的 Vue.js开源项目[每日前端夜话0xFF]

    Vue.js 框架是由经验丰富的开发人员创建的,具有可靠的社区支持,丰富的功能,而且是轻量级的。

    疯狂的技术宅
  • CodePen vue SFC 、flutter 在线玩耍来袭

    首先介绍下,CodePen 是一个在线社区,用于测试和展示用户创建的 HTML,CSS 和 JavaScript 代码段。在上面有非常多的代码片段,以及 CSS...

    秋风的笔记
  • bootStrapTableJs 怎么引入VUE进行做项目

    首先这是一款处理表格的js,我们如果写element习惯了会发现其实表格的处理是业务中相对简单的,他没有什么很强的交互,就是拿到数据,按照头部和body对应起来...

    何处锦绣不灰堆
  • 基于Vue.js的大型报告页项目实现过程及问题总结(一)

    今年5月份的时候做了一个测评报告项目,需要在网页正常显示的同时且可打印为pdf,当时的技术方案采用jquery+template的方式,因为是固定模板所以并没有...

    李文杨
  • 2019 前端面试题汇总(主要为 Vue)

    毕业之后就在一直合肥小公司工作,没有老司机、没有技术氛围,在技术的道路上我只能独自摸索。老板也只会画饼充饥,前途一片迷茫看不到任何希望。于是乎,我果断辞职,在新...

    Fundebug

扫码关注云+社区

领取腾讯云代金券