v-text Diretiva de Conteúdo de Texto
Última atualização: 2026-10-22
v-text Diretiva de Conteúdo de Texto
O v-text define o textContent do elemento a partir da expressão; equivale à interpolação com chaves duplas, mas substitui todo o conteúdo do elemento.
| Grupo | Diretivas |
|---|---|
| Tipo | Diretiva |
| Escopo | Template |
| Versão do Vue | 3.0+ |
| Suporte a SSR | Sim |
📝 Sintaxe
<p v-text="msg"></p>
<p v-text="msg"></p>
<!-- equivalente a -->
<p>{{ msg }}</p>⚙️ Argumentos
| expression | Qualquer expressão; o resultado é convertido em string e gravado como texto do elemento |
|---|
Retorno：Diretiva, sem valor de retorno
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo:
Saída：
Both paragraphs show Hello Vue! — v-text behaves exactly like interpolation.💡 Pontos-chave
ℹ️ Nota O v-text sobrescreve o conteúdo existente; para interpolar apenas parte do texto, {{ }} é mais seguro.
💡 Dica O conteúdo é texto puro, tags HTML não são interpretadas (para isso, use v-html).
⚠️ Aviso O v-text usa o mesmo mecanismo do {{ }}: HTML nos dados é exibido escapado, o que protege contra XSS.
🏷️ Diretivas relacionados
💡 Casos Relacionados
Mais casos em breve.
📚 Tutoriais Relacionados
❓ FAQ
P Qual a diferença entre v-text e a interpolação {{ }}?
R A saída é idêntica, texto puro; a diferença é que o v-text substitui todo o conteúdo do elemento, enquanto {{ }} só ocupa a sua posição — em texto misto, a interpolação é mais flexível.
P HTML nos dados é renderizado?
R Não. Tanto o v-text quanto o {{ }} escapam; as tags aparecem literalmente — essa é a proteção padrão contra XSS.
P Quando usar em vez da interpolação?
R Use quando o elemento carrega exatamente um texto e nada mais; a marcação fica mais curta.
