v-model 表单绑定
v-model 是「双向绑定」语法糖：输入框输入 → 写入数据，数据变化 → 输入框值更新。它本质上等价于 :value="msg" @input="msg = $event.target.value"。
不同表单控件用法一致：input/textarea/单选（v-model 绑定字符串值）、多选 checkbox（绑定数组）、select（绑定选中项的 value）。单选按钮组用同一个 v-model 值，多选绑数组时要给每个 input 配 value。
- v-model = :value + @input，数据与输入框互相同步
- checkbox 单个绑定布尔值，多个绑数组
- select 的 v-model 绑在 select 上，值等于被选 option 的 value
HTML
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>v-model 表单绑定</title> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> </head> <body> <div id="app"> <p>文本：<input v-model="text"> → {{ text }}</p> <!-- 多行文本 --> <p>备注：<textarea v-model="note"></textarea> → {{ note }}</p> <!-- 单选组：同一 v-model --> <label><input type="radio" v-model="gender" value="M"> 男</label> <label><input type="radio" v-model="gender" value="F"> 女</label> <p>性别：{{ gender }}</p> <!-- 多选：绑数组 --> <label><input type="checkbox" v-model="hobbies" value="看书"> 看书</label> <label><input type="checkbox" v-model="hobbies" value="编码"> 编码</label> <p>爱好：{{ hobbies.join('、') }}</p> <!-- 下拉 --> <select v-model="city"><option value="bj">北京</option><option value="sh">上海</option></select> <p>城市：{{ city }}</p> </div> <script> const { createApp, ref } = Vue; createApp({ setup() { return { text: '', note: '', gender: 'M', hobbies: ['编码'], city: 'bj' }; } }).mount('#app'); </script> </body> </html>
本节要点v-model 一统所有表单控件：单选绑字符串、多选绑数组、select 绑 option 的 value。
