Utilizando v-bind para vinculação de atributos

Olá, alunos! Bem-vindos à aula 2 de Diretivas Vue.js. Hoje, vamos aprender sobre a diretiva v-bind e como usá-la para vincular dados do seu aplicativo ao DOM.

O que é a diretiva v-bind?

A diretiva v-bind permite vincular dados do seu aplicativo aos atributos do DOM. Ela é uma das diretivas mais comuns do Vue.js.

Como usar a diretiva v-bind?

A sintaxe básica da diretiva v-bind é a seguinte:

<elemento v-bind:atributo="valor">

Onde:

• elemento é o elemento ao qual você deseja vincular o atributo.
• atributo é o nome do atributo que você deseja vincular.
• valor é o valor que você deseja vincular ao atributo.

Exemplo

Vamos ver um exemplo de como usar a diretiva v-bind para vincular a propriedade nome de um objeto ao atributo title de um elemento h1.

<h1 v-bind:title="nome">Olá, mundo!</h1>

No exemplo acima, o valor da propriedade nome do objeto será vinculado ao atributo title do elemento h1.

Outros exemplos

Vamos ver alguns outros exemplos de como usar a diretiva v-bind:

• Vincular a propriedade cor de um objeto ao atributo style de um elemento div para alterar a cor da borda da div:

<div v-bind:style="{ borderColor: cor }">

• Vincular a propriedade ativo de um objeto ao atributo disabled de um elemento button para habilitar ou desabilitar o botão:

<button v-bind:disabled="!ativo">Clique aqui</button>

Expressões JavaScript na diretiva v-bind

Você pode usar expressões JavaScript na diretiva v-bind para vincular valores dinâmicos aos atributos do DOM.

Por exemplo, vamos ver um exemplo de como usar a diretiva v-bind para vincular o valor atual do tempo ao atributo title de um elemento h1:

<h1 v-bind:title="new Date().toLocaleString()">Olá, mundo!</h1>

No exemplo acima, o valor atual do tempo será vinculado ao atributo title do elemento h1.

Desafio

Aqui está um desafio para você:

• Crie um aplicativo Vue.js que exiba o nome do usuário e sua idade.
• Use a diretiva v-bind para vincular o nome do usuário e a idade ao título e ao conteúdo de um elemento h1.

Boa sorte!

Compartilhar

Compartilhar

Siga-me