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!
