Vue 3: Attribute Bindings with v-bind
easy⏱ 5 mincoursevue
:shorthand for v-bind
v-bind:attr and :attr are 100% equivalent — the colon shorthand is what you'll see in virtually all real-world Vue code. Anything inside the quotes is evaluated as a JS expression in the component's scope, not treated as a literal string.
<!-- These two lines do exactly the same thing -->
<a v-bind:href="docsUrl">Docs</a>
<a :href="docsUrl">Docs</a>
<!-- Static attribute: always the literal string '/about' -->
<a href="/about">About</a>
Works on any attribute
:src, :disabled, :alt, :title, :class — the : shorthand works the same way on all of them. Boolean attributes like disabled are removed from the DOM entirely when the bound expression is falsy, not just set to "false".
<img :src="logoUrl" :alt="logoAlt" />
<button :disabled="isLoading">Save</button>
Build the bound card
Create an App with data() holding a logoUrl, a docsUrl, and an isDisabled boolean. Bind an <img>'s :src, an <a>'s :href, and a <button>'s :disabled, then let a click toggle isDisabled.