vue3 单选框竖着排

要将 Vue 3 中的单选框竖着排列，你可以使用 flexbox 或者 grid 布局来实现。下面是两种方法：

1. 使用 Flexbox 布局：

<template>
  <div class="container">
    <label v-for="option in options" :key="option.value" class="option">
      <input type="radio" :value="option.value" v-model="selectedOption">
      {{ option.label }}
    </label>
  </div>
</template>

<style>
.container {
  display: flex;
  flex-direction: column;
}

.option {
  margin-bottom: 10px;
}
</style>

<script>
export default {
  data() {
    return {
      selectedOption: null,
      options: [
        { label: 'Option 1', value: 'option1' },
        { label: 'Option 2', value: 'option2' },
        { label: 'Option 3', value: 'option3' }
      ]
    };
  }
};
</script>

2. 使用 Grid 布局：

<template>
  <div class="container">
    <label v-for="option in options" :key="option.value" class="option">
      <input type="radio" :value="option.value" v-model="selectedOption">
      {{ option.label }}
    </label>
  </div>
</template>

<style>
.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 10px;
}

.option {
  margin-bottom: 10px;
}
</style>

<script>
export default {
  data() {
    return {
      selectedOption: null,
      options: [
        { label: 'Option 1', value: 'option1' },
        { label: 'Option 2', value: 'option2' },
        { label: 'Option 3', value: 'option3' }
      ]
    };
  }
};
</script>

以上两种方法可以实现单选框竖着排列效果，你可以根据自己的具体需求选择其中一种。希望能帮到你！