Vue中<option>的selected属性无效，选中状态完全由v-model值决定；value缺失时取文本内容，类型不匹配会导致空白显示。
Vue 中 <option> 的 selected 属性基本无效，它不会影响 v-model 绑定行为；真正起作用的是 v-model 绑定值与 <option> 的 value（或文本内容）是否匹配。
为什么写了 selected 却没用
HTML 原生 <option selected> 仅在初始渲染、且没有 v-model 时生效。一旦 Vue 接管了 <select>，它的选中状态完全由 v-model 的值决定——Vue 会忽略 DOM 上的 selected 属性，直接按绑定值去“找”匹配项。
- 写
<option value="2" selected>二</option>，但v-model="selectedValue"初始是'1'→ 最终选中的是value="1"的项，selected被无视 - 即使 DOM 检查看到
selected=""属性，那也只是 Vue 渲染后的结果，不是你手动写的那个属性在起作用 - 在 Vue Devtools 或
console.log中观察selectedValue，比检查 DOM 更可靠
value 属性缺失时到底提交什么
当 <option> 没写 value，而 v-model 绑定的是字符串变量，Vue 默认取 <option> 的 textContent（即标签内文字）作为值。
-
<option>+→ 提交"+" -
<option>处理中</option>→ 提交"处理中" - 如果选项文本含空格或换行，提交值也会带这些空白，容易导致后端校验失败
- 若绑定变量是数字类型（如
ref<number>(0)</number>），而<option>没value，Vue 仍会赋字符串（如"1"），造成类型不一致
动态生成 <option> 时 :value 必须显式绑定
用 v-for 渲染选项时，value 不是静态字符串，必须用 :value（即 v-bind:value），否则 Vue 会把表达式当字面量字符串处理。
- ❌
<option value="{{ item.id }}">{{ item.name }}</option>→ 实际提交字符串"{{ item.id }}" - ✅
<option :value="item.id">{{ item.name }}</option>→ 正确绑定为数字或字符串值 - 对象作为
value是允许的（:value="item"），但要注意深比较问题：切换选项时若对象引用不变，v-model可能不触发更新 - 务必配
:key="item.id"（或唯一标识），避免列表重排时复用节点导致状态错乱
默认选中项的设置时机很关键
初始化选中不能靠 DOM 属性，必须让 v-model 绑定值在选项渲染完成前就等于某个 option 的 value（或文本）。
- 在
data或setup()中直接赋初值是最稳妥的：selectedValue: '2'或selectedValue = ref('2') - 异步加载选项后设置，默认选中要等
options存在且非空再赋值，否则会选中空值或触发 warning - 不要在
mounted里用document.querySelector().value = ...强制设置——绕过 Vue 响应式，后续交互可能失效 - 如果初始值来自接口，推荐用
watch监听options，再设v-model，而不是用nextTick等 DOM 渲染
最常被忽略的点是：value 类型和绑定变量类型必须对齐。字符串 ID 写成数字、数字 ID 被当成字符串、空字符串 "" 和 null 混用——这些都会让匹配失败，导致下拉框显示为空白，哪怕 DOM 里明明有对应 <option>。
