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.

Practice

1. What does the mustache syntax {{ message }} do in a Vue template?

easy

A. It displays the value of the variable message inside the HTML.

B. It creates a new variable called message.

C. It comments out the text inside the braces.

D. It runs a JavaScript function named message.

Solution

1. Step 1: Understand mustache syntax purpose

   The mustache syntax {{ }} is used in Vue to insert data values into HTML templates.

2. Step 2: Identify what {{ message }} does

   It shows the current value of the variable named message in the rendered HTML.

3. Final Answer:

   It displays the value of the variable message inside the HTML. -> Option A

4. Quick Check:

   Mustache syntax = display variable value [OK]

Hint: Mustache {{ }} always shows variable content in HTML [OK]

Common Mistakes:

• Thinking it creates variables
• Assuming it runs functions
• Confusing it with comments

2. Which of the following is the correct way to display a variable title inside a Vue template using mustache syntax?

easy

A. [[ title ]]

B. { title }

C. {{ title }}

D. {% title %}

Solution

1. Step 1: Recall Vue interpolation syntax

   Vue uses double curly braces {{ }} to insert variables into templates.

2. Step 2: Match the correct syntax

   Only {{ title }} matches Vue's mustache syntax for interpolation.

3. Final Answer:

   {{ title }} -> Option C

4. Quick Check:

   Vue interpolation = {{ variable }} [OK]

Hint: Vue uses double curly braces {{ }} for interpolation [OK]

Common Mistakes:

• Using single braces instead of double
• Confusing with other template syntaxes
• Using wrong bracket types

3. Given the Vue data: { name: 'Anna' }, what will be rendered by this template?

<div>Hello, {{ name }}!</div>

medium

A. Hello, {{ name }}!

B. Hello, Anna!

C. Hello, name!

D. Hello, !

Solution

1. Step 1: Identify the data value

   The variable name has the value 'Anna'.

2. Step 2: Understand interpolation output

   The mustache syntax replaces {{ name }} with 'Anna' in the rendered HTML.

3. Final Answer:

   <div>Hello, Anna!</div> -> Option B

4. Quick Check:

   Variable value replaces {{ name }} [OK]

Hint: Mustache {{ }} shows variable value, not the code itself [OK]

Common Mistakes:

• Expecting to see {{ name }} literally
• Confusing variable name with its value
• Leaving interpolation empty

4. What is wrong with this Vue template snippet?

<div>{{ user.name </div>

medium

A. Mustache syntax cannot access object properties.

B. Variable user is not defined.

C. Interpolation must use square brackets instead of curly braces.

D. Missing closing curly braces for interpolation.

Solution

1. Step 1: Check mustache syntax completeness

   The snippet has only one closing curly brace; mustache syntax requires double closing braces }}.

2. Step 2: Confirm correct syntax for interpolation

   Proper interpolation should be {{ user.name }} with both opening and closing double braces.

3. Final Answer:

   Missing closing curly braces for interpolation. -> Option D

4. Quick Check:

   Mustache needs {{ and }} to work [OK]

Hint: Always close mustache with double braces }} [OK]

Common Mistakes:

• Using single closing brace
• Forgetting to close interpolation
• Thinking square brackets are needed

5. You want to display a greeting that changes based on time using mustache syntax. Which template code correctly shows 'Good morning' if hour is less than 12, otherwise 'Good afternoon'?

hard

A. <div>{{ hour < 12 ? 'Good morning' : 'Good afternoon' }}</div>

B. <div>{{ if (hour < 12) 'Good morning' else 'Good afternoon' }}</div>

C. <div>{{ hour < 12 && Good morning || 'Good afternoon' }}</div>

D. <div>{{ hour < 12 ? Good morning : Good afternoon }}</div>

Solution

1. Step 1: Understand mustache supports JavaScript expressions

   Mustache syntax in Vue allows simple JavaScript expressions like ternary operators.

2. Step 2: Check each option for correct syntax

   <div>{{ hour < 12 ? 'Good morning' : 'Good afternoon' }}</div> uses a valid ternary expression with quotes around strings, which is correct. <div>{{ if (hour < 12) 'Good morning' else 'Good afternoon' }}</div> uses invalid syntax inside mustache. <div>{{ hour < 12 && Good morning || 'Good afternoon' }}</div> misses quotes around Good morning, causing a syntax error. <div>{{ hour < 12 ? Good morning : Good afternoon }}</div> misses quotes around strings, causing errors.

3. Final Answer:

   <div>{{ hour < 12 ? 'Good morning' : 'Good afternoon' }}</div> -> Option A

4. Quick Check:

   Ternary with quotes works in mustache [OK]

Hint: Use ternary with quotes inside {{ }} for conditional text [OK]

Common Mistakes:

• Omitting quotes around strings
• Using if-else statements inside mustache
• Using logical operators incorrectly