当前位置：首页 > VUE

vue实现二选一

2026-01-21 13:01:12VUE

Vue 实现二选一功能

在 Vue 中实现二选一功能可以通过多种方式完成，以下是几种常见的方法：

使用 `v-model` 绑定单选按钮

通过 v-model 绑定一个变量，利用单选按钮的特性实现二选一：

<template>
  <div>
    <input type="radio" id="option1" value="option1" v-model="selectedOption" />
    <label for="option1">选项1</label>
    <input type="radio" id="option2" value="option2" v-model="selectedOption" />
    <label for="option2">选项2</label>
    <p>当前选择: {{ selectedOption }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: 'option1' // 默认选中选项1
    };
  }
};
</script>

使用 `v-if` 或 `v-show` 切换显示

通过条件渲染实现二选一的效果：

<template>
  <div>
    <button @click="showOption1 = true">显示选项1</button>
    <button @click="showOption1 = false">显示选项2</button>
    <div v-if="showOption1">选项1内容</div>
    <div v-else>选项2内容</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showOption1: true
    };
  }
};
</script>

使用计算属性动态切换

通过计算属性动态返回不同的内容：

<template>
  <div>
    <button @click="currentOption = 'A'">选项A</button>
    <button @click="currentOption = 'B'">选项B</button>
    <div>{{ optionContent }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentOption: 'A'
    };
  },
  computed: {
    optionContent() {
      return this.currentOption === 'A' ? '选项A内容' : '选项B内容';
    }
  }
};
</script>

使用组件动态切换

通过动态组件实现二选一：

vue实现二选一

<template>
  <div>
    <button @click="currentComponent = 'ComponentA'">组件A</button>
    <button @click="currentComponent = 'ComponentB'">组件B</button>
    <component :is="currentComponent"></component>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  components: {
    ComponentA,
    ComponentB
  },
  data() {
    return {
      currentComponent: 'ComponentA'
    };
  }
};
</script>