vue四宫格样式不用v-for

Vue.js 中创建一个四宫格布局而无需使用 `v-for` 可能通过 CSS Grid 或 Flexbox 实现。例如，你可以利用 CSS Grid 的特性，为每个单元格设置网格容器（grid container），然后设置行（row）和列（column）的数量。HTML 结构可能会像这样：

<div class="container">
  <div class="cell cell-1">单元格1</div>
  <div class="cell cell-2">单元格2</div>
  <div class="cell cell-3">单元格3</div>
  <div class="cell cell-4">单元格4</div>
  <!-- ... -->
</div>

CSS 部分：

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10px; /* 控制单元格间的间距 */
}

.cell {
  background-color: #f1f1f1;
  padding: 20px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

这里假设四宫格每行两列。如果你需要动态调整，可以利用 CSS 的响应式设计或者使用一些 Vue.js 插件如 `vue-grid-layout`。