将接口集合返回dataList集合,便利到每行两个div的item中

要将接口返回的数据集合 dataList 遍历并渲染到每行两个 div的 .item 中, 您可以使用 Vue.js 的 v-for
指令来实现。以下是一个示例代码,演示了如何实现这个需求:

<template>
  <div class="container">
    <div class="row" v-for="(item, index) in dividedDataList" :key="index">
      <div class="item">
        {{ item[0] }} 
      div>
      <div class="item" v-if="item[1]">
        {{ item[1] }} 
      div>
    div>
  div>
template>

<script>
export default {
  data() {
    return {
      dataList: ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6"] // 示例数据集合
    };
  },
  computed: {
    dividedDataList() {
      // 将数据集合分成每行两个数据的二维数组
      const dividedArray = [];
      for (let i = 0; i < this.dataList.length; i += 2) {
        const row = [];
        row.push(this.dataList[i]);
        if (i + 1 < this.dataList.length) {
          row.push(this.dataList[i + 1]);
        }
        dividedArray.push(row);
      }
      return dividedArray;
    }
  }
};
script>

<style>
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.row {
  width: 49%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.item {
  width: 48%;
  height: 100px;
  background-color: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
}
style>

在上述示例中,我们首先将数据集合 dataList 分成每行两个数据的二维数组 dividedDataList。然后,使用 v-for 指令在模板中循环渲染每行的两个

,将数据显示在 .item 中。如果数据不足两个,只渲染一个

请将上述示例代码中的示例数据集合替换为您从接口获取的实际数据,并根据需要调整样式和布局以满足您的需求。

你可能感兴趣的:(vue,css,前端,javascript)