🎨 Exemplo 08 - x-bind Atributos Dinâmicos

1. x-bind com Classe CSS

:class com objeto: { 'classe': condicao } - classe é adicionada se condicao for true

2. x-bind com Múltiplas Classes

Múltiplas classes podem ser aplicadas condicionalmente

3. x-bind com Atributos (src, href, alt)

:src, :href, :alt vinculam atributos HTML a dados reativos

4. x-bind com Style Inline

:style com objeto: { property: valor } - propriedades CSS dinâmicas

5. x-bind com Atributos Booleanos

Botão está

:disabled, :checked, etc. são atributos booleanos que vinculam a dados

6. x-bind com href (Links Dinâmicos)

Links úteis:

:href vincula URLs dinâmicas a links

7. x-bind com Data Attributes

Elemento com data attributes dinâmicos

data-user-id:
data-status:
Data attributes customizados podem armazenar metadados dinâmicos

8. Shorthand :bind (Atalho)

Forma longa: x-bind:class="classe"

Forma curta (recomendada): :class="classe"

Exemplo usando shorthand :class
Use o atalho : em vez de x-bind: para código mais limpo