vue 3 中 v-bind 不支持修饰符；有效修饰符仅用于 v-on（如 .stop、.prevent）和 v-model（如 .trim、.number）；动态属性行为需用计算属性、v-bind 对象语法或 :prop 显式绑定实现。
Vue 3 中不支持给 v-bind（即 :）添加修饰符。修饰符（如 .sync、.prop、.camel 等）仅适用于 v-on（事件）和 v-model，**不能用于属性绑定指令本身**。
哪些修饰符是有效的？用在哪？
真正能带修饰符的只有两类绑定场景：
-
v-on（@）事件绑定：支持
.stop、.prevent、.capture、.self、.once、.passive等，例如：@click.stop.prevent="handler" -
v-model：支持自定义修饰符（如
.trim、.number、.lazy）以及组件级修饰符（如v-model.capitalize），例如：<input v-model.trim="searchText">或<myinput v-model:title="pageTitle"></myinput>
那“动态属性 + 行为控制”怎么实现？
如果你想要的是“根据条件动态设置某个属性，并附带某种 DOM 行为或语义”，有几种常见替代方式：
-
用计算属性封装逻辑：把修饰意图转化为数据逻辑。比如想让
:id在空值时完全不渲染，可写成：:id="validId || null"（Vue 会自动移除该 attribute） -
用
v-bind对象语法批量控制多个属性：v-bind="{ id: dynamicId, class: computedClass, 'data-testid': testId }"，更灵活且可复用 -
对特殊 attribute 使用
.prop修饰符（仅限v-bind的简写形式）：这不是修饰符加在指令上，而是通过点号语法显式声明绑定到 DOM property 而非 attribute，例如：:value.prop="inputValue"或:checked.prop="isChecked"—— 这属于v-bind的特殊用法，不是通用修饰符机制
容易混淆的点：.sync 已被移除
Vue 2 中的 v-bind:xxx.sync 在 Vue 3 中已废弃。对应功能由 v-model:xxx 承担。例如：
- Vue 2：
<modal :title.sync="modalTitle"></modal> - Vue 3：
<modal v-model:title="modalTitle"></modal>（子组件需接收titleprop 并触发update:title事件）
总结一句话
想给属性加“修饰行为”，本质不是修饰 v-bind，而是选对绑定方式：v-model 处理双向交互类属性，v-bind + 计算属性/对象语法处理静态或条件性属性，:xxx.prop 显式绑定到 DOM property。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
