Text interpolation with mustache syntax in Vue

Introduction

Text interpolation lets you show dynamic data inside your webpage easily. Mustache syntax {{ }} is a simple way to insert variables or expressions into your HTML.

Displaying user names or messages that change based on input

Showing live data like current time or counts

Updating parts of the page without reloading

Binding simple variables to text content in your UI

Creating templates that update automatically when data changes

Syntax

Vue

<div>{{ variableName }}</div>

Use double curly braces {{ }} to wrap the variable or expression you want to display.

Vue automatically updates the displayed text when the variable changes.

Examples

This example shows a simple greeting using a variable userName.

Vue

<template>
  <p>Hello, {{ userName }}!</p>
</template>

<script setup>
const userName = 'Alice'
</script>

You can also use expressions inside the mustache syntax.

Vue

<template>
  <p>2 + 3 = {{ 2 + 3 }}</p>
</template>

Functions and methods can be used inside interpolation to transform data.

Vue

<template>
  <p>{{ message.toUpperCase() }}</p>
</template>

<script setup>
const message = 'hello world'
</script>

Sample Program

This Vue component uses mustache syntax to show a user name, today's date, and a lucky number. The displayed text updates automatically if the variables change.

Vue

<template>
  <section>
    <h1>Welcome, {{ user }}!</h1>
    <p>Today is {{ new Date().toLocaleDateString() }}.</p>
    <p>Your lucky number is {{ luckyNumber }}.</p>
  </section>
</template>

<script setup>
import { ref } from 'vue'

const user = ref('Sam')
const luckyNumber = ref(7)
</script>

Important Notes

Mustache syntax only works inside the template section of Vue components.

It automatically escapes HTML to keep your app safe from code injection.

For more complex logic, use computed properties or methods instead of putting too much inside {{ }}.

Summary

Use {{ }} to insert variables or expressions into your HTML easily.

Vue updates the displayed text automatically when data changes.

Keep interpolation simple and use other Vue features for complex logic.