关于Vue中通过:checked/:unchecked控制单选按钮状态的疑问

问题1：能否通过:unchecked属性修改radio-button的选中状态？ #

不行，HTML原生的单选按钮（<input type="radio">）根本不存在unchecked属性，只有checked这个布尔属性用来控制选中状态。你写的:unchecked="check1"属于无效绑定，Vue无法识别这个自定义属性，自然没法控制单选按钮的选中状态。

问题2：:checked的作用是什么？仅用于设置初始选中状态吗？ #

不是。checked是原生单选按钮的核心属性，在Vue中通过:checked绑定响应式变量时，是响应式控制选中状态的：当绑定的变量值为true时，单选按钮会被选中；变量变为false时，单选按钮自动取消选中。它既能设置初始状态，也能在变量变化时实时同步控件的选中状态。

不过对于单选按钮组，更推荐使用v-model绑定同一个变量，比单独绑定:checked更简洁高效。

问题3：选中radio时，插值内容不更新怎么解决？ #

你的代码存在几个关键问题导致插值不更新：

• 单选按钮没有正确绑定响应式变量：单选按钮是一组控件，应该共享同一个绑定变量，而非给每个按钮单独绑定check1、check2。
• 错误使用了不存在的:unchecked属性，没有建立正确的数据绑定关系。
• 模板中的事件绑定函数名（change_）和脚本里定义的函数名（change）不匹配，且就算触发也没有更新响应式变量。

修正后的完整代码 #

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
  <!-- 设置相同name确保是同一组单选按钮，绑定同一个v-model -->
  <input type="radio" name="gender" v-model="selectedGender" :value="male" @change="handleChange"/>
  <input type="radio" name="gender" v-model="selectedGender" :value="female" @change="handleChange"/>
  <div>当前选中值: {{ selectedGender }}</div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import { ref } from 'vue'
export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<script setup>
const selectedGender = ref('')
const male = ref('male')
const female = ref('female')

function handleChange(event) {
  console.log("选中值:", event.target.value)
  // v-model已自动更新selectedGender，无需手动赋值
}
</script>

关键修正点说明 #

1. 给两个单选按钮设置相同的name属性：这是HTML原生要求，确保它们属于同一组，只能同时选中一个。
2. 使用v-model="selectedGender"绑定同一个响应式变量：选中任意单选按钮时，selectedGender会自动同步为对应按钮的value值，插值内容也会实时更新。
3. 修正了事件处理函数的命名，确保能正确触发打印逻辑。

内容的提问来源于stack exchange，提问作者Amrmsmb