每行三列复选框，每列整齐排放

要创建一个Vue应用，其中包含每行三个并列排列的复选框，你可以使用`v-for`指令结合CSS布局来实现这个布局。这里有一个简单的例子：

<template>
  <div class="checkbox-container">
    <div v-for="(item, index) in items" :key="index">
      <div class="column">
        <input type="checkbox" v-model="item.checked" :id="`column-${index}-${item.id}`">
        <label :for="`column-${index}-${item.id}`">{{ item.label }}</label>
      </div>
      <!-- 如果有更多列，可以添加更多的 <div class="column"> ... </div> -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, label: 'Option 1', checked: false },
        { id: 2, label: 'Option 2', checked: false },
        // 添加更多项，保持每行三个
      ]
    };
  }
};
</script>

<style scoped>
.checkbox-container {
  display: flex;
  flex-wrap: wrap;
}

.column {
  flex: 1; /* 这会让每个单元格等宽 */
  margin: 5px; /* 可调整间距 */
}
</style>

在这个例子中，我们首先定义了一个数组 `items`，包含了每行的选项及其状态。然后，使用 `v-for` 循环遍历这些选项，为每一项生成一个复选框和相应的标签。

CSS样式设置`.checkbox-container`为flex布局，使其能适应不同屏幕尺寸。`.column`定义了每个复选框所在的列，设置了等宽和间距。