Hoje vamos falar sobre interpolação de variáveis no Vue, sendo assim, continuando nossa série de artigos dos estudos deste framework javascript.

Se você ainda não viu os demais artigos, recomendo a leitura dos demais antes de iniciar este, que estão organizados neste outro artigo.

Como os artigos anteriores, iremos abordar um exemplo simples de uso de variáveis com o Vue e mostrar algumas possibilidades dentro deste framework.

Então, mãos na massa e vamos “codar”!

Interpolação de variáveis com o Vue

Vamos pegar o arquivo do exemplo anterior, para facilitar, deixo o link do Gist com o exemplo inicial que utilizamos no artigo Criando sua primeira Aplicação Vue.

Conforme o exemplo anterior, tínhamos em nossa view-model o atributo data com a propriedade mensagem, a qual passava para a tela o valor “Hello”.

Entendendo esta estrutura, acredito que já tenha ficado claro que, tudo o que passarmos no atributo data, poderemos utilizar dentro de nossa view, ou seja, na pagina ou componente em questão.

Então, vamos criar mais informações em nossa view-model para ser passada para nossa view, exibindo assim os dados.

Veja o exemplo:

Ai pra não ficar esta mensagem booleana na tela (caso você insira a variável doador sem nenhum tratamento), troquei na ultima pergunta para um if inline e trocando as condições para uma string.

O resultado da tela é igual ao da imagem:

Conclusão

Simples não? Ai você pergunta, existem outras possibilidades e a resposta é SIM! Existe um universo de coisas que são possíveis de ser feitos com estas variáveis.

Para isso, recomendo que consulte a documentação do Vue e pra ser mais específico à sessão de Interpolações.

No próximo artigo, iremos abordar uma parte que irá fazer mais sentido pra você o uso destas interpolações que é a manipulação de dados com o Vue.

Ps.: todos estes exemplo estão disponíveis em meu repositório chamado Vuejs do GitHub, e caso tenha alguma dúvida, deixa aqui nos comentários.

Então até a próxima!