Vue 3: Enlace de atributos con v-bind
easy⏱ 5 mincoursevue
La forma abreviada : de v-bind
v-bind:attr y :attr son 100% equivalentes — la forma abreviada con dos puntos es la que vas a ver en prácticamente todo el código Vue real. Todo lo que está dentro de las comillas se evalúa como una expresión de JS en el scope del componente, no se trata como un string literal.
<!-- 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>
Funciona con cualquier atributo
:src, :disabled, :alt, :title, :class — la forma abreviada : funciona igual en todos. Los atributos booleanos como disabled se eliminan del DOM por completo cuando la expresión enlazada es falsa, no simplemente se les asigna "false".
<img :src="logoUrl" :alt="logoAlt" />
<button :disabled="isLoading">Save</button>
Construí la tarjeta enlazada
Creá un App con data() que tenga logoUrl, docsUrl y un booleano isDisabled. Enlazá el :src de un <img>, el :href de un <a>, y el :disabled de un <button>, y dejá que un clic alterne isDisabled.