What does v-bind do?

Question

Accepted Answer

`v-bind` dynamically binds an **HTML attribute** (or component prop) to a JavaScript expression, so the attribute updates reactively when the data changes. Its shorthand is just `:`. ```vue ``` The difference between `:src="imageUrl"` and `src="imageUrl"` is crucial: without the `:`, it's a literal string; with it, Vue evaluates the expression. ## Binding classes and styles (special handling) ```vue ``` Vue gives `:class` and `:style` special object/array syntax for conditionally applying classes and inline styles. ## Binding a whole object of attributes ```vue ``` `v-bind` without an argument spreads an object's keys as multiple attributes — handy for passing through many props at once. ## Passing props to components ```vue ``` The same `:prop` syntax passes data into child components (not just DOM attributes). ## Why it matters `v-bind` (`:`) is how you make attributes and props **dynamic and reactive** — the counterpart to `{{ }}` for content. It's used constantly: binding `src`/`href`/`disabled`, conditional `:class`/`:style`, and passing props to components. Knowing the object/array syntaxes for class/style and the object-spread form covers nearly all attribute-binding needs.