当前位置：首页 > VUE

vue实现点击单选事件

2026-01-21 21:20:29VUE

Vue 实现点击单选事件的方法

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

使用 v-model 绑定单选按钮

通过 v-model 绑定一个变量，可以轻松实现单选功能。当用户点击不同的单选按钮时，绑定的变量会自动更新为选中按钮的值。

<template>
  <div>
    <input type="radio" id="option1" value="option1" v-model="selectedOption" />
    <label for="option1">Option 1</label>
    <input type="radio" id="option2" value="option2" v-model="selectedOption" />
    <label for="option2">Option 2</label>
    <p>Selected option: {{ selectedOption }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: '',
    };
  },
};
</script>

使用 @click 事件手动处理

如果需要在点击时执行额外逻辑，可以通过 @click 事件手动更新选中状态。

<template>
  <div>
    <input
      type="radio"
      id="option1"
      value="option1"
      :checked="selectedOption === 'option1'"
      @click="handleRadioClick('option1')"
    />
    <label for="option1">Option 1</label>
    <input
      type="radio"
      id="option2"
      value="option2"
      :checked="selectedOption === 'option2'"
      @click="handleRadioClick('option2')"
    />
    <label for="option2">Option 2</label>
    <p>Selected option: {{ selectedOption }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: '',
    };
  },
  methods: {
    handleRadioClick(value) {
      this.selectedOption = value;
    },
  },
};
</script>

动态生成单选按钮

如果选项是动态生成的，可以通过 v-for 循环渲染单选按钮。

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

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

结合表单验证

如果需要表单验证，可以结合 Vue 的表单验证库（如 VeeValidate）或自定义验证逻辑。

<template>
  <div>
    <input
      type="radio"
      id="option1"
      value="option1"
      v-model="selectedOption"
      required
    />
    <label for="option1">Option 1</label>
    <input
      type="radio"
      id="option2"
      value="option2"
      v-model="selectedOption"
      required
    />
    <label for="option2">Option 2</label>
    <p v-if="error" style="color: red;">{{ error }}</p>
    <button @click="validate">Submit</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: '',
      error: '',
    };
  },
  methods: {
    validate() {
      if (!this.selectedOption) {
        this.error = 'Please select an option';
      } else {
        this.error = '';
        alert('Form submitted successfully!');
      }
    },
  },
};
</script>

以上方法可以根据实际需求选择或组合使用，灵活实现 Vue 中的单选功能。

vue实现点击单选事件