Vue 3 六行六列网格布局示例 | 代码和解析

<template>
  <div class="grid">
    <div v-for="(item, index) in gridItems" :key="index" class="grid-item">
      {{ item }}
    </div>
  </div>
</template>
<script>
import { reactive } from 'vue';

export default {
  setup() {
    const gridItems = reactive(Array.from(Array(36), (_, i) => i + 1));

    return {
      gridItems,
    };
  },
};
</script>
<style>
.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 10px;
}

.grid-item {
  border: 1px solid #ccc;
  padding: 10px;
}
</style>
<p>这个代码示例中，使用了 Vue 3 的 <code>reactive</code> 函数来创建响应式数据 <code>gridItems</code>，它是一个包含 1 到 36 的数字的数组。然后，在模板中使用 <code>v-for</code> 指令遍历 <code>gridItems</code> 数组，并将每个数字显示在一个带有边框和内边距的 <code>div</code> 元素中。</p>
<p>通过设置 CSS 样式，使用了 CSS Grid 布局来创建一个六行六列的网格布局，每个网格项之间有 10px 的间隔。</p>