Interpolações
Esta seção apresenta as interpolações de texto, HTML puro e expressões JavaScript.
Interpolação de texto
A interpolação de texto é a forma mais básica de renderização de dados. Ela permite a renderização de dados em texto simples. Para isso, basta usar a sintaxe {{ variavel }}, também conhecida como mustache. Considere o exemplo abaixo:
<span>Valor do contador: {{contador}}</span>
O código acima renderiza o valor da variável contador no elemento <span>. Se o valor da variável contador for 10, o código acima será renderizado como:
<span>Valor do contador: 10</span>
HTML puro
O padrão de interpolação de texto não é adequado para renderizar HTML puro. Para isso, o VueJs oferece a diretiva v-html. Considere o exemplo abaixo:
<script setup>
const rawHtml = '<span style="color: red">Este é um texto em vermelho</span>';
</script>
<template>
<p>Usando interpolação de textos: {{rawHtml}}</p>
<p>Usando v-html: <span v-html="rawHtml"></span></p>
</template>
O código acima renderiza o seguinte HTML:
Usando v-html: Este é um texto em vermelho
Neste exemplo, a interpolação de texto renderiza o HTML como texto, enquanto a diretiva v-html renderiza o HTML como HTML. No segundo caso, o conteúdo do elemento <span> é renderizado com o valor de rawHtml e interpretado como HTML puro.
Nota: No VueJS, o atributo v-html é chamado de diretiva. Diretivas são atributos especiais que começam com v- e que são usados para modificar o comportamento de um elemento. Diretivas são usadas para renderizar dados, modificar o comportamento de um elemento, ou modificar o comportamento de um elemento de acordo com o estado da aplicação. As diretivas serão abordadas em detalhes em outro momento.
Expressões JavaScript
O VueJs permite a renderização de expressões JavaScript. Para isso, basta usar a sintaxe {{ expressao }}. As expressões JavaScript são avaliadas em tempo de execução, ou seja, o resultado é renderizado no template de acordo com o valor da expressão no momento da renderização. Considere o exemplo abaixo:
<script setup>
const numero = 1;
const ok = true;
const mensagem = 'programar';
</script>
<template>
<p>{{ numero + 1 }}</p>
<p>{{ ok ? 'Sim' : 'Não' }}</p>
<p>{{mensagem.split('').reverse().join('') }}</p>
</template>
As expressões acima são avaliadas como uma expressão Javascript e o resultado é renderizado no template. No primeiro caso, o resultado é 2, no segundo caso, o resultado é Sim, e no terceiro caso, o resultado é ramargorp.
Nos templates, você pode usar qualquer expressão JavaScript válida. Isso inclui operadores aritméticos, lógicos, condicionais, até funções JavaScript, como Math.max(), Math.min(), etc. As expressões JavaScript podem ser usadas nos seguintes lugares:
- Interpolação de texto
- Em qualquer diretiva Vue (atributos que começam com
v-)
Note que são permitidas apenas expressões JavaScript simples. Não é possível usar declarações de variáveis, bem como controles de fluxo como if, for, etc.
Por fim, é possível invocar funções JavaScript em templates. Considere o exemplo abaixo:
<script setup>
const mensagem = 'programar';
function inverter(texto) {
return texto.split('').reverse().join('');
}
</script>
<template>
<p>{{ inverter(mensagem) }}</p>
</template>
No exemplo acima, a função inverter() é invocada em um template. O resultado é renderizado no elemento <p>. Nesse caso, o resultado é ramargorp.