html 竖着渲染

image.png

<template>
  <div class="container">
    <div class="column" v-for="(col, index) in columns" :key="index">
      <div class="item" v-for="(item, idx) in col" :key="idx">{{ item }}</div>
    </div>
  </div>
</template>
<style scoped>
  .container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* 添加间隙 */
  }
  
  .column {
    display: flex;
    flex-direction: column;
    width: 200px; /* 每列的宽度，可以根据需要调整 */
  }
  
  .item {
    margin-bottom: 10px; /* 项目之间的间隔 */
    background-color: #f4f4f4;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  </style>
<script setup>
  import { ref } from 'vue';
  
  // 示例数据，每列最多3个项目
  const items = [
    'Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6', 'Item 7', 'Item 8', 'Item 9', 'Item 10', 'Item 11', 'Item 12'
  ];
  
  // 计算每列的内容
  const columns = ref([[], [], [], []]);
  
  // 将每个项目分配到列中，每列最多3个项目
  items.forEach((item, index) => {
    const columnIndex = Math.floor(index / 3);  // 每列最多3个项目
    columns.value[columnIndex].push(item);
  });
  </script>