v-bind 有什么作用？

Question

v-bind 有什么作用？

Accepted Answer

`v-bind` 将一个 **HTML attribute**（或 component prop）动态绑定到 JavaScript 表达式，当数据改变时该 attribute 会响应式更新。它的简写是 `:`。 ```vue ``` `:src="imageUrl"` 和 `src="imageUrl"` 之间的区别至关重要：没有 `:` 时，它是一个字符串字面量；有 `:` 时，Vue 会求值该表达式。 ## 绑定 class 和 style（特殊处理） ```vue ``` Vue 为 `:class` 和 `:style` 提供了特殊的对象/数组语法，用于条件性地应用 class 和内联样式。 ## 绑定整个属性对象 ```vue ``` `v-bind` 不带参数时会将一个对象的所有键展开为多个 attribute —— 这对于一次性传递多个 props 非常方便。 ## 向 component 传递 props ```vue ``` 相同的 `:prop` 语法可以将数据传入子 component（不仅仅是 DOM attribute）。 ## 为什么这很重要 `v-bind`（`:`）是让 attribute 和 props **动态化和响应式化** 的方式 —— 它是用于内容的 `{{ }}` 的对应物。它被频繁使用：绑定 `src`/`href`/`disabled`、条件性 `:class`/`:style`，以及向 component 传递 props。掌握 class/style 的对象/数组语法以及对象展开形式，几乎可以覆盖所有 attribute 绑定的需求。