用vue3语言写出一个六行六列的代码

这是一个使用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>

这个代码示例中，使用了Vue 3的 reactive 函数来创建响应式数据 gridItems，它是一个包含1到36的数字的数组。然后，在模板中使用 v-for 指令遍历 gridItems 数组，并将每个数字显示在一个带有边框和内边距的 div 元素中。

通过设置CSS样式，使用了CSS Grid布局来创建一个六行六列的网格布局，每个网格项之间有10px的间隔