v-model 绑定下拉框自动同步 value 值：单选绑定字符串/数字变量，多选绑定数组；需确保 option 已渲染再赋值，默认值匹配 value 属性，动态数据推荐 onmounted + nexttick 处理。
v-model 绑定下拉选择框（<select></select>）非常直接：它会自动把选中的 <option></option> 的 value 值同步到绑定的响应式变量中，无需手动监听 change 事件。
基础单选下拉框绑定
确保绑定的变量是字符串或数字类型（与 option 的 value 类型一致），Vue 会自动匹配并高亮对应选项。
- 用
ref或reactive定义一个初始值为空字符串或默认选项值的变量 -
<select v-model="selectedValue"></select>直接绑定该变量 - 每个
<option></option>必须有value属性，其值将作为选中结果
例如：const selectedCategory = ref("")，配合 <option value="Python">Python</option>，选中后 selectedCategory.value 就是 "Python"。
多选下拉框绑定
给 <select></select> 添加 multiple 属性，v-model 就会自动绑定到一个数组，选中项的 value 会依次加入该数组。
- 绑定变量必须是数组类型，如
ref([])或ref(["A", "C"]) - 用户按住 Ctrl（Windows）或 Cmd（Mac）可多选；在移动端通常长按触发多选
- 取消某一项，对应值会从数组中移除
动态数据场景（接口加载后设置默认选中）
常见问题是：先赋值、后渲染选项，导致默认选中失效。关键在于「先确保 option 已挂载，再给 v-model 赋值」。
- 推荐在
onMounted中请求数据，拿到列表后再设置选中值 - 或者使用
nextTick确保 DOM 渲染完成后再赋值 - 若后端返回的是对象（如
{ id: 101, name: '研发部' }），v-model 应绑定id字段，而非整个对象
常见注意事项
避免踩坑：
- 不要给
<option></option>设置空字符串以外的 falsy 值（如null、undefined）作为value，否则可能匹配异常 - 如果选项由
v-for动态生成，确保:value绑定的是原始值（如item.id），不是引用对象 - 不建议在
<select></select>上同时写value属性和v-model，会造成冲突
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
