Vue动态参数绑定核心是用方括号包裹JS表达式实现响应式属性/指令名计算，支持v-bind:[key]和v-[directive]语法，需配合计算属性提升可维护性并注意合法标识符等边界情况。
Vue 中动态参数绑定的核心是用方括号 [] 包裹 JavaScript 表达式，让属性名或指令名变成“可计算的”，而不是写死的字符串。它不是拼接字符串，而是实时求值、响应式更新的机制。
动态绑定属性名：v-bind:[key]="value"
这是最常用也最直观的用法。方括号里的表达式会在每次渲染时重新执行，返回什么字符串，就绑定到什么 HTML 属性上。
- 基础写法：
<img v-bind:[attrName]="url">，其中attrName是响应式变量，值为'src'或'data-src' - 条件切换更灵活：
v-bind:[isImg ? 'src' : 'href']="link"，无需写多个v-if分支，逻辑集中、模板干净 - 搭配计算属性更清晰：
v-bind:[bindingKey]="value"，bindingKey可由复杂逻辑（如权限、设备类型、状态码）决定，比如返回'aria-label'或'title'
动态绑定指令名：v-[directive]="arg"
Vue 3 原生支持指令名动态化，适合做行为级控制，比如根据状态启用不同指令。
- 典型场景：按钮在“禁用”和“加载中”两种状态间切换，对应
v-disabled和v-loading（需自行实现 loading 指令） - 写法示例：
<button v-[status === 'pending' ? 'loading' : 'disabled']="true"></button> - 注意：动态指令名只接受已注册的指令，且不能是内置指令别名（如
v-model不支持动态写成v-[name]）
与计算属性配合提升可维护性
当判断逻辑变多（比如要根据用户角色、网络状态、内容类型三者组合决定绑定哪个属性），直接写在模板里会难以阅读。这时应提取到计算属性中。
立即学习“前端免费学习笔记（深入）”；
- 例如：
const attrKey = computed(() => { if (role === 'admin') return 'data-admin'; if (offline) return 'data-offline'; return 'src'; }) - 模板中只需：
<div v-bind:[attrKey]="payload"></div> - TypeScript 项目中还能获得类型推导支持，避免拼错属性名
注意事项和边界情况
动态参数虽强大，但要注意几个实际开发中容易踩的坑：
- 表达式必须返回合法标识符（不能含空格、特殊符号），否则绑定失败；带连字符的属性名（如
data-id）需用引号包裹：v-bind:['data-id']="id" - 绑定值为
null、undefined或false时，对应属性会被移除；0、''、true等真值会保留属性（但值可能为空） - 不建议过度嵌套逻辑，比如
v-bind:[a ? b ? 'x' : 'y' : c ? 'z' : 'w']，应拆到计算属性里
