Vue 3 支持动态指令参数实现属性名运行时绑定，语法为:[attributeName]，其中 attributeName 是响应式字符串变量，如 "data-id" 或 "aria-live"，方括号紧贴冒号、不可有空格，值为空或非法时自动跳过绑定。

Vue 3 支持用动态指令参数实现属性名的运行时绑定，核心写法是 : [attributeName]（注意方括号是语法必需部分，不能省略）。这让你能根据变量值决定绑定哪个 HTML 属性或组件 prop，而不是写死属性名。

动态属性名的基本写法

使用 : [xxx] 语法，其中 xxx 是一个响应式字符串变量，它的值就是最终要绑定的属性名：

• attributeName 必须是字符串，比如 "id"、"src"、"data-tooltip"，甚至 "aria-label"
• 方括号必须紧贴冒号，中间不能有空格：:[attr] ✅，: [attr] ❌
• 绑定的值仍按常规方式提供，例如 : [attr]="value"

常见使用场景

适用于需要灵活控制属性名的情况，比如统一管理多个自定义 data 属性、动态设置 ARIA 属性、或封装通用组件时透传未知属性：

• 绑定不同 data 属性：
  ，当 dataKey = "data-id" 且 dataValue = "123"，渲染为
• 动态设置 ARIA 属性：，配合 ariaAttr = "aria-invalid" 和 ariaValue = true，生成 aria-invalid="true"
• 与 v-bind 对象展开结合：，用于向子组件传递动态 prop

注意事项和限制

这个语法看似灵活，但有几个关键细节容易出错：

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

• 属性名字符串中不能含非法字符（如空格、引号），建议用 kebab-case 或 camelCase，避免运行时报错
• 如果 attributeName 是 null、undefined 或空字符串，Vue 会跳过该绑定，不渲染任何 attribute
• 不支持表达式直接写在方括号里（如 :[isActive ? 'class' : 'style']），需先计算好字符串再赋值给变量
• 动态绑定 class 或 style 推荐优先用对象/数组语法（:class="{...}"），更语义化且 Vue 优化充分；: [key] 更适合非标准或运行时才确定的属性

完整示例

以下是一个可运行的小例子：

<template><div :>
    动态绑定演示
  </div>
</template><script setup>
import { ref } from 'vue'
const bindingKey = ref('data-id')
const bindingValue = ref('abc-456')
const ariaKey = ref('aria-live')
const ariaValue = ref('polite')
</script>

渲染结果：

动态绑定演示

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！