Vue基础教程（95）表单输入绑定之单选按钮：[特殊字符] 前端告白指南：如何与Vue中的“单身按钮“正确牵手？-优快云博客

一、前言：那个让我夜不能寐的小圆圈

记得我刚学Vue那会儿，最让我崩溃的不是什么响应式原理，也不是虚拟DOM，而是——那几个破单选按钮！

明明看起来比隔壁React简单多了，可每次我想让那几个小圆圈乖乖听话时，它们就像叛逆期的少年，我点左边它偏不亮，我选右边它装死。最气人的是，有时候明明看着选中了，数据却像石沉大海，纹丝不动！

后来我才明白，我跟Vue的表单绑定，差的不是技术，而是一场正式的“告白”。今天，就让我做你的恋爱顾问，带你用正确的方式“撩”动Vue中的单选按钮！

二、基础篇：从“单向暗恋”到“双向奔赴”

2.1 远古时代的痛苦回忆

在纯JavaScript时代，我们是怎么伺候单选按钮的？

<!-- 远古写法 -->
<form>
  <input type="radio" name="gender" value="male" id="male">
  <label for="male">男</label>
  
  <input type="radio" name="gender" value="female" id="female">  
  <label for="female">女</label>
</form>
<script>
// 要获取选中的值，得这么折腾：
const selectedValue = document.querySelector('input[name="gender"]:checked').value;
// 要设置选中，得这么麻烦：
document.querySelector('input[value="male"]').checked = true;
</script>

看看这一堆代码！又要name属性，又要checked属性，活脱脱像在追一个高冷女神，你得猜她的心思，还得时刻关注她的状态。

2.2 Vue的救赎：v-model的魅力

然后Vue出现了，带着它的v-model闪亮登场：

<template>
  <div>
    <input type="radio" id="male" value="male" v-model="gender">
    <label for="male">男神</label>
    
    <input type="radio" id="female" value="female" v-model="gender">
    <label for="female">女神</label>
    
    <p>你选择了：{
  
  { gender }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      gender: 'male' // 默认选中"男"
    }
  }
}
</script>

看明白了吗？这就是“双向奔赴”的爱情！

你点按钮，数据自动更新
你改数据，按钮自动选中
不用再操心name属性（Vue在背后默默处理了）
不用手动操作DOM检查状态

2.3 v-model到底在背后做了什么？

很多人以为v-model很神秘，其实它就是个月老，在按钮和数据之间牵线搭桥：

<!-- 你写的 -->
<input type="radio" value="male" v-model="gender">

<!-- Vue理解的 -->
<input 
  type="radio" 
  value="male"
  :checked="gender === 'male'"  <!-- 判断是否选中 -->
  @change="gender = $event.target.value" <!-- 点击时更新数据 -->
>

所以v-model本质上是个语法糖，它帮你做了两件事：

把数据绑定到checked属性上
监听change事件来更新数据

三、实战篇：各种花式“撩”按钮技巧

3.1 基础版：性别选择（必会！）

<template>
  <div class="container">
    <h3>请选择你的性别：</h3>
    
    <div class="radio-group">
      <