vue二维数组的使用举例

最新推荐文章于 2024-04-02 15:11:23 发布
最新推荐文章于 2024-04-02 15:11:23 发布
阅读量7.4k 收藏 3
点赞数
分类专栏： 前端入门 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33960741/article/details/112591385
版权

<div

            v-for="(sites, index) in site_list"

            :key="index"

            :class="sites[0].class"

 >

<div class="category">

              <div class="category-prefix">

                <img

                  src="../../assets/images/Rectangle36.png"

                  alt=""

                  class="category-prefix-img"

                />

              </div>

              <span>

                {{ sites[0].type }}

              </span>

            </div>

<div class="site-set">

              <div class="site" v-for="(site, index) in sites" :key="index">

                <div class="site-icon">

                  <img :src="site.photo" />

                </div>

                <div class="name-description">

                  <div class="site-name">

                    <a :href="site.url">

                      <span>

                        {{ site.name }}

                      </span>

                    </a>

                  </div>

                  <div class="site-description">

                    <span>{{ site.description }}</span>

                  </div>

                </div>

              </div>

实现了如图的效果

 

 

网站种类为一维，一种网站中的各个网址为一维，其中index为二维数组的一维的索引，不需要自定义，从0开始，先遍历种类创建各个种类的div容器

对应data中的二维数组如下：

 

site_list: [

        [

          {

            type: "招聘",

            class: "recruitment",

            photo: require("~/assets/images/Rectangle19.svg"),

            name: "Boss直聘",

            description: "一款BOSS与牛人直接开聊的招聘工具",

            url: "",

          },

          {

            type: "招聘",

            class: "recruitment",

            photo: require("~/assets/images/Rectangle19.svg"),

            name: "Boss直聘",

            description: "一款BOSS与牛人直接开聊的招聘工具",

            url: "",

          },

          {

            type: "招聘",

            class: "recruitment",

            photo: require("~/assets/images/Rectangle19.svg"),

            name: "Boss直聘",

            description: "一款BOSS与牛人直接开聊的招聘工具",

            url: "",

          },

          {

            type: "招聘",

            class: "recruitment",

            photo: require("~/assets/images/Rectangle19.svg"),

            name: "Boss直聘",

            description: "一款BOSS与牛人直接开聊的招聘工具",

            url: "",

          },

          {

            type: "招聘",

            class: "recruitment",

            photo: require("~/assets/images/Rectangle19.svg"),

            name: "Boss直聘",

            description: "一款BOSS与牛人直接开聊的招聘工具",

            url: "",

          },

          {

            type: "招聘",

            class: "recruitment",

            photo: require("~/assets/images/Rectangle19.svg"),

            name: "Boss直聘",

            description: "一款BOSS与牛人直接开聊的招聘工具",

            url: "",

          },

        ],

        [

          {

            type: "猎头",

            class: "headhunter",

            photo: require("~/assets/images/Rectangle19.svg"),

            name: "Boss直聘",

            description: "一款BOSS与牛人直接开聊的招聘工具",

            url: "",

          },

          {

            type: "猎头",

            class: "headhunter",

            photo: require("~/assets/images/Rectangle19.svg"),

            name: "Boss直聘",

            description: "一款BOSS与牛人直接开聊的招聘工具",

            url: "",

          },

          {

            type: "猎头",

            class: "headhunter",

            photo: require("~/assets/images/Rectangle19.svg"),

            name: "Boss直聘",

            description: "一款BOSS与牛人直接开聊的招聘工具",

            url: "",

          },

          {

            type: "猎头",

            class: "headhunter",

            photo: require("~/assets/images/Rectangle19.svg"),

            name: "Boss直聘",

            description: "一款BOSS与牛人直接开聊的招聘工具",

            url: "",

          },

          {

            type: "猎头",

            class: "headhunter",

            photo: require("~/assets/images/Rectangle19.svg"),

            name: "Boss直聘",

            description: "一款BOSS与牛人直接开聊的招聘工具",

            url: "",

          },

          {

            type: "猎头",

            class: "headhunter",

            photo: require("~/assets/images/Rectangle19.svg"),

            name: "Boss直聘",

            description: "一款BOSS与牛人直接开聊的招聘工具",

            url: "",

          },

        ],

        [

          {

            type: "背调",

            class: "backgroundCheck",

            photo: require("~/assets/images/Rectangle19.svg"),

            name: "Boss直聘",

            description: "一款BOSS与牛人直接开聊的招聘工具",

            url: "",

          },

          {

            type: "背调",

            class: "backgroundCheck",

            photo: require("~/assets/images/Rectangle19.svg"),

            name: "Boss直聘",

            description: "一款BOSS与牛人直接开聊的招聘工具",

            url: "",

          },

          {

            type: "背调",

            class: "backgroundCheck",

            photo: require("~/assets/images/Rectangle19.svg"),

            name: "Boss直聘",

            description: "一款BOSS与牛人直接开聊的招聘工具",

            url: "",

          },

          {

            type: "背调",

            class: "backgroundCheck",

            photo: require("~/assets/images/Rectangle19.svg"),

            name: "Boss直聘",

            description: "一款BOSS与牛人直接开聊的招聘工具",

            url: "",

          },

          {

            type: "背调",

            class: "backgroundCheck",

            photo: require("~/assets/images/Rectangle19.svg"),

            name: "Boss直聘",

            description: "一款BOSS与牛人直接开聊的招聘工具",

            url: "",

          },

          {

            type: "背调",

            class: "backgroundCheck",

            photo: require("~/assets/images/Rectangle19.svg"),

            name: "Boss直聘",

            description: "一款BOSS与牛人直接开聊的招聘工具",

            url: "",

          },

        ],

        [

          {

            type: "薪酬",

            class: "salary",

            photo: require("~/assets/images/Rectangle19.svg"),

            name: "Boss直聘",

            description: "一款BOSS与牛人直接开聊的招聘工具",

            url: "",

          },

          {

            type: "薪酬",

            class: "salary",

            photo: require("~/assets/images/Rectangle19.svg"),

            name: "Boss直聘",

            description: "一款BOSS与牛人直接开聊的招聘工具",

            url: "",

          },

          {

            type: "薪酬",

            class: "salary",

            photo: require("~/assets/images/Rectangle19.svg"),

            name: "Boss直聘",

            description: "一款BOSS与牛人直接开聊的招聘工具",

            url: "",

          },

          {

            type: "薪酬",

            class: "salary",

            photo: require("~/assets/images/Rectangle19.svg"),

            name: "Boss直聘",

            description: "一款BOSS与牛人直接开聊的招聘工具",

            url: "",

          },

          {

            type: "薪酬",

            class: "salary",

            photo: require("~/assets/images/Rectangle19.svg"),

            name: "Boss直聘",

            description: "一款BOSS与牛人直接开聊的招聘工具",

            url: "",

          },

          {

            type: "薪酬",

            class: "salary",

            photo: require("~/assets/images/Rectangle19.svg"),

            name: "Boss直聘",

            description: "一款BOSS与牛人直接开聊的招聘工具",

            url: "",

          },

        ],

        [

          {

            type: "五险一金",

            class: "insuranceFund",

            photo: require("~/assets/images/Rectangle19.svg"),

            name: "Boss直聘",

            description: "一款BOSS与牛人直接开聊的招聘工具",

            url: "",

          },

          {

            type: "五险一金",

            class: "insuranceFund",

            photo: require("~/assets/images/Rectangle19.svg"),

            name: "Boss直聘",

            description: "一款BOSS与牛人直接开聊的招聘工具",

            url: "",

          },

          {

            type: "五险一金",

            class: "insuranceFund",

            photo: "/site_assets/client/assets/images/Rectangle19.svg",

            name: "Boss直聘",

            description: "一款BOSS与牛人直接开聊的招聘工具",

            url: "",

          },

          {

            type: "五险一金",

            class: "insuranceFund",

            photo: require("~/assets/images/Rectangle19.svg"),

            name: "Boss直聘",

            description: "一款BOSS与牛人直接开聊的招聘工具",

            url: "",

          },

          {

            type: "五险一金",

            class: "insuranceFund",

            photo: require("~/assets/images/Rectangle19.svg"),

            name: "Boss直聘",

            description: "一款BOSS与牛人直接开聊的招聘工具",

            url: "",

          },

          {

            type: "五险一金",

            class: "insuranceFund",

            photo: require("~/assets/images/Rectangle19.svg"),

            name: "Boss直聘",

            description: "一款BOSS与牛人直接开聊的招聘工具",

            url: "",

          },

        ],

        [

          {

            type: "企业福利",

            class: "welfare",

            photo: require("~/assets/images/Rectangle19.svg"),

            name: "Boss直聘",

            description: "一款BOSS与牛人直接开聊的招聘工具",

            url: "",

          },

          {

            type: "企业福利",

            class: "welfare",

            photo: require("~/assets/images/Rectangle19.svg"),

            name: "Boss直聘",

            description: "一款BOSS与牛人直接开聊的招聘工具",

            url: "",

          },

          {

            type: "企业福利",

            class: "welfare",

            photo: require("~/assets/images/Rectangle19.svg"),

            name: "Boss直聘",

            description: "一款BOSS与牛人直接开聊的招聘工具",

            url: "",

          },

          {

            type: "企业福利",

            class: "welfare",

            photo: require("~/assets/images/Rectangle19.svg"),

            name: "Boss直聘",

            description: "一款BOSS与牛人直接开聊的招聘工具",

            url: "",

          },

          {

            type: "企业福利",

            class: "welfare",

            photo: require("~/assets/images/Rectangle19.svg"),

            name: "Boss直聘",

            description: "一款BOSS与牛人直接开聊的招聘工具",

            url: "",

          },

          {

            type: "企业福利",

            class: "welfare",

            photo: require("~/assets/images/Rectangle19.svg"),

            name: "Boss直聘",

            description: "一款BOSS与牛人直接开聊的招聘工具",

            url: "",

          },

        ],

        [

          {

            type: "体检",

            class: "medical",

            photo: require("~/assets/images/Rectangle19.svg"),

            name: "Boss直聘",

            description: "一款BOSS与牛人直接开聊的招聘工具",

            url: "",

          },

          {

            type: "体检",

            class: "medical",

            photo: require("~/assets/images/Rectangle19.svg"),

            name: "Boss直聘",

            description: "一款BOSS与牛人直接开聊的招聘工具",

            url: "",

          },

          {

            type: "体检",

            class: "medical",

            photo: require("~/assets/images/Rectangle19.svg"),

            name: "Boss直聘",

            description: "一款BOSS与牛人直接开聊的招聘工具",

            url: "",

          },

          {

            type: "体检",

            class: "medical",

            photo: require("~/assets/images/Rectangle19.svg"),

            name: "Boss直聘",

            description: "一款BOSS与牛人直接开聊的招聘工具",

            url: "",

          },

          {

            type: "体检",

            class: "medical",

            photo: require("~/assets/images/Rectangle19.svg"),

            name: "Boss直聘",

            description: "一款BOSS与牛人直接开聊的招聘工具",

            url: "",

          },

          {

            type: "体检",

            class: "medical",

            photo: require("~/assets/images/Rectangle19.svg"),

            name: "Boss直聘",

            description: "一款BOSS与牛人直接开聊的招聘工具",

            url: "",

          },

        ],

        [

          {

            type: "法律",

            class: "law",

            photo: require("~/assets/images/Rectangle19.svg"),

            name: "Boss直聘",

            description: "一款BOSS与牛人直接开聊的招聘工具",

            url: "",

          },

          {

            type: "法律",

            class: "law",

            photo: require("~/assets/images/Rectangle19.svg"),

            name: "Boss直聘",

            description: "一款BOSS与牛人直接开聊的招聘工具",

            url: "",

          },

          {

            type: "法律",

            class: "law",

            photo: require("~/assets/images/Rectangle19.svg"),

            name: "Boss直聘",

            description: "一款BOSS与牛人直接开聊的招聘工具",

            url: "",

          },

          {

            type: "法律",

            class: "law",

            photo: require("~/assets/images/Rectangle19.svg"),

            name: "Boss直聘",

            description: "一款BOSS与牛人直接开聊的招聘工具",

            url: "",

          },

          {

            type: "法律",

            class: "law",

            photo: require("~/assets/images/Rectangle19.svg"),

            name: "Boss直聘",

            description: "一款BOSS与牛人直接开聊的招聘工具",

            url: "",

          },

          {

            type: "法律",

            class: "law",

            photo: require("~/assets/images/Rectangle19.svg"),

            name: "Boss直聘",

            description: "一款BOSS与牛人直接开聊的招聘工具",

            url: "",

          },

        ],

]

 

css样式如下：

.emptyBox {

  position: relative;

  top: -60px;

  @media screen and (max-width: 500px) {

    top: -15px;

  }

}

.category-prefix {

  width: 4px;

  height: 100%;

  margin-top: 0px;

  float: left;

  display: block;

  line-height: 100%;

  margin-left: 0;

  padding-top: 1.5%;

  @media screen and (max-width: 500px) {

    padding-top: 1%;

    line-height: 40px;

    display: none;

  }

}

.category-prefix-img {

  width: "4px";

  height: "18px";

}

.recruitment,

.headhunter,

.backgroundCheck,

.salary,

.insuranceFund,

.welfare,

.medical,

.law {

  width: 100%;

  margin-right: 240px;

  margin-top: 24px;

  margin-left: 0px;

  border-radius: 4px;

  background-color: white;

  @media screen and (max-width: 500px) {

    height: 21%;

    display: inline-block;

  }

}

 

.site-set {

  width: 100%;

  line-height: 100px;

  margin-left: 0;

  text-align: left;

  overflow: auto;

  @media screen and (max-width: 500px) {

    margin-top: 0px;

    display: grid;

    grid-template-columns: 1fr 1fr;

  }

}

.site {

  width: 16%;

  margin-left: 0px;

  margin-right: 5px;

  display: block;

  float: left;

  @media screen and (max-width: 500px) {

    width: 100%;

    justify-content: center;

    justify-items: center;

  }

}

 

.site-icon {

  width: 20px;

  height: 100%;

  margin-right: 13px;

  display: block;

  float: left;

  margin-left: 24px;

  margin-top: -5%;

  @media screen and (max-width: 500px) {

    margin-left: 0%;

    margin-right: 0%;

    text-align: center;

    margin-top: -6%;

    float: left;

    width: 28%;

  }

  img {

  width: 25px;

  height: 100%;

  }

}

.name-description {

  width: 110px;

  float: left;

  display: block;

  position: relative;

  @media screen and (max-width: 500px) {

    width: 70%;

    height: 100%;

    margin: 0 auto;

  }

}

.site-name {

  font-size: 14px;

  opacity: 0.87;

  line-height: 22px;

  margin-top: 20px;

  height: 22px;

  @media screen and (max-width: 500px) {

 

    line-height: 20px;

    margin: 0 auto;

    margin-top: 20px;

  }

  span {

  top: 22%;

  position: relative;

  @media screen and (max-width: 500px) {

    height: 20px;

    display: block;

    text-align: left;

    }

  }

  

}

 

.site-name span:hover {

  text-decoration: underline;

}

.site-description {

  font-size: 12px;

  opacity: 0.6;

  line-height: 20px;

  padding-bottom: 28px;

  padding-top: 8px;

  @media screen and (max-width: 500px) {

    font-size: 10px;

 

    line-height: 14px;

    margin: 0 auto;

    margin-top: 5px;

 

    padding: 0;

  }

}

bupt_ljh
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端vue二维数组解析
09-12
通过vue解析表头合并的表格，后台返回的数据格式为[{name:aa,list:[{value:100}]}] 通过table与v-for组合循环数据达到目的。 vue 表头合并数据解析 vue 二维数组解析 vue 二维list解析 vue table+v-for
Vue遍历二维数组
黄瓜炒鸡蛋的博客
08-04 2682
剥洋葱
vue 二维数组_Vue入门，从扫雷开始 - 编写第一个组件 (5/7)
weixin_39823017的博客
12-05 671
编写第一个组件 面板我们要开始写扫雷游戏了，此时需要删掉自动创建的一些文件，加上我们自己创建的新文件。在这之前，可以看看 src/App.vue 以及 src/components/HelloWord.vue ，结合前一节说到的组件结构和用法，加深一些了解。好了，开始吧，先使用 vs code 打开项目目录吧。不要忘记通过命令 npm run serve 启动服务器一些准备工作到 src/comp...
如何用vue展示二维数组
heyu996的博客
07-31 1079
我们可以用vue组库件element的el-row和el-col来实现。
二维数组
Dr.Holmes的博客
07-18 4275
一、二维数组的定义当一维数组的元素类型也是一维数组的时候，便构成了“数组的数组”，即二维数组，二维数组的书写格式如下： 数据类型 数组名[常量表达式1][常量表达式2]； 例如： int a[4][10]; 说明：a数组实质上是一个4行10列的表格，表格中可存储40个元素，第一行第一列对应的a数组是a[0][0],第n行n列对应的数组元素是 a[n-1][m-1]。在定义数组下标有多少个的时
使用vue中的v-for遍历二维数组的方法
08-27
当处理的数据结构是二维数组时，即数组中的每个元素也是一个数组，`v-for`的使用方式会稍微复杂一些。本篇文章将详细介绍如何在Vue中利用`v-for`遍历二维数组。 首先，我们要了解二维数组的基本概念。二维数组可以...
JavaScript实现一维数组转化为二维数组
12-23
啥也不说了，上代码吧！...//每个子数组里的元素个数 var arr = [1,4,5,6,34,34,67,895,2456,87,9,5,23,884,56]; var Arr = new Array(Math.ceil(arr.length/num)); for(var i = 0; i<Arr.length;i++){
vue中对象数组去重的实现
10-15
主要介绍了vue中对象数组去重的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue遍历二维数组
热门推荐
悟世君子的博客
08-16 1万+
代码如下: &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;&amp;lt;/title&amp;gt; &amp;lt
vue源码中值得学习的方法
LuckyWinty的博客
10-12 348
作者：chinamasters https://segmentfault.com/a/1190000025157159最近在深入研究vue源码，把学习过程中，看到的一些好玩的的函数方...
动态生成二维数组的做法
07-06
动态生成二维数组的做法，注意其中指针的用法，简单易明
vue 二维数组_3分钟短文 | Laravel 表单验证数组的数据
weixin_39818264的博客
12-12 404
引言本文说一个小的知识点，在表单验证中，对数组数据进行验证， 我们需要进行两项，一项是数组本身的验证，一项是数组元素的验证。学习时间例如有一个POST请求过来的数据，由3个数组组成，name，amount，description。三个字段的验证需求如下：name字段，必填，每个元素唯一，且至少有3个元素amount字段，必填，元素要求都是整数，且最少有1个元素description字段，必填，元素...
vue 使用 创建二维数组响应数据 渲染 echarts图标
tengyuxin的博客
10-03 1260
目前我遇到的情况就是用动态的二维数组数据渲染echarts图标，我们从后端收到的接口一般是个一维数组，需要手动构建并且保证响应式。接下来我做了个案例。
vue中将一维对象数组转换为二维对象数组
大剑师兰特的GIS世界
01-12 1697
在做vue项目时候，有的需求是将一维的对象数组转换成二维的对象数组，怎么操作呢？ 在本示例中，按照时间的划分，将一维对象数组转化为二维对象数组。第一维度的内容是时间，第二纬度的内容是一维数组中的某一项。
vue3 element ui 一维数组变二维数组，子数组长度为n
最新发布
weixin_43882434的博客
04-02 208
在特殊的情况下我们需要把后端传过来的数组变成我们想要的二维数组，比如在轮播图中每一页都需要2项数据的时候，然而后端传来的只能是1维的数组list。把一维数组变成二维数组，例如[1,2,3,4,5,6] ===> [[1,2],[3,4],[5,6]]先把方法写在src/utils/index.ts文件中。
vue一维数组分成二维数组
一撇一画的博客
06-08 675
一维数组分为指定个数的二维数组
vue的v-for二维数组（购物车）
山有魂兮的博客
09-10 2167
实现效果：
动态二维数组实现
jade07的专栏
08-28 568
网上搜动态二维数组，大多都先确定行或者列然后用指针操作实现。并不能做到行列都未知的情况下存储数据。为了方便以后操作封装一下代码： #include #include #include using namespace std; typedef int xc_type; vectorxc_type> xc_getline() {     vector
vue实现二维数组表格渲染
温暖前端的博客
02-03 1259
指令生成表头和表格行，并在每个单元格中显示对应的值。使用Vue 3的组合式API。在模板中，使用嵌套的。在Vue中渲染二维数组表格可以采用嵌套的。的语法来迭代二维数组中的行数据，并在。的语法来迭代每行中的列数据，并在。指令来遍历二维数组。标签内部，我们使用嵌套的。数组则表示表格的数据。指令来渲染二维数组。指令遍历每行中的列。
vue二维数组变一维数组
09-06
Vue的二维数组可以通过使用数组的flat()方法将其转化为一维数组。例如，假设我们有一个二维数组arr，可以使用arr.flat()方法将其变为一维数组。 这个方法会将所有的子数组的元素连接起来，形成一个新的一维数组。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值