v-bind (:) 动态绑定属性

最后更新：2026-10-22

v-bind 把表达式结果绑定到 HTML 属性，简写为冒号：:href="url"；class/style 支持对象与数组语法。

📝 语法

<a v-bind:href="url">链接</a>
<img :src="imgSrc" :alt="altText">
<div :class="{ active: isActive }"></div>
<div :style="{ color: textColor }"></div>

expression	属性名 + 表达式；class/style 可传对象/数组；也支持 :[动态属性名]

返回值：指令，无返回值

修改下面的代码，在预览区实时查看效果：

输出：

链接指向教程站；「状态文本」带 hot 类（可在样式里高亮）。

💡 提示 : 是 v-bind: 的简写；布尔属性（disabled/checked）绑 false 时 Vue 会自动移除该属性。

ℹ️ 说明 class 与 style 的增强语法：对象形式按布尔切换、数组形式合并多个来源。

💡 提示 v-bind="obj" 可一次性展开对象里的全部属性（批量透传，如 v-bind="$attrs"）。

更多案例即将上线。

Q 怎么一次性绑很多属性？

A v-bind="obj" 展开对象的全部键值，组件透传常用 v-bind="$attrs"。

Q class 绑定为什么能用对象？

A Vue 对 class/style 做了增强：对象形式 { 类名: 布尔 } 按条件拼接，数组形式合并多个来源。

Q 布尔属性怎么控制？

A 绑 false 或 null 时 Vue 自动移除该属性，绑 true 添加——无需手写 disabled=""。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。