Text interpolation with mustache syntax in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to display the message using mustache syntax.

Vue

<template>
  <p>[1]</p>
</template>

<script setup>
const message = 'Hello, Vue!'
</script>

Drag options to blanks, or click blank then click option'

Amsg

Bmessage

Ctext

Dcontent

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name that is not defined in the script.

Forgetting to use double curly braces for interpolation.

The mustache syntax {{ message }} displays the value of the message variable in the template.

2fill in blank

medium

Complete the code to interpolate the user's name inside the greeting.

Vue

<template>
  <h1>Welcome, [1]!</h1>
</template>

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

Drag options to blanks, or click blank then click option'

Ausername

Buser

Cname

DuserName

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name that does not match the script variable.

Missing the curly braces around the variable.

The variable userName holds the user's name, so {{ userName }} shows it in the template.

3fill in blank

hard

Fix the error in the template to correctly show the count variable.

Vue

<template>
  <span>[1]</span>
</template>

<script setup>
const count = 5
</script>

Drag options to blanks, or click blank then click option'

Acount

Bcounts

CCount

Dcounter

Attempts:

3 left

💡 Hint

Common Mistakes

Using uppercase letters that don't match the variable name.

Using a different variable name not declared in the script.

Variable names are case-sensitive. The correct variable is count with lowercase 'c'.

4fill in blank

hard

Fill both blanks to interpolate the first and last name in the greeting.

Vue

<template>
  <p>Hello, [1] [2]!</p>
</template>

<script setup>
const firstName = 'John'
const lastName = 'Doe'
</script>

Drag options to blanks, or click blank then click option'

AfirstName

BlastName

CfullName

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Using a single variable that does not exist.

Mixing up the order of first and last name.

Use firstName and lastName to show both names in the greeting.

5fill in blank

hard

Fill all three blanks to interpolate the user's full info: uppercase first name, age, and city.

Vue

<template>
  <p>[1] is [2] years old and lives in [3].</p>
</template>

<script setup>
const firstName = 'emma'
const age = 28
const city = 'Paris'
</script>

Drag options to blanks, or click blank then click option'

AfirstName.toUpperCase()

Bage

Ccity

DfirstName

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to use firstName without converting to uppercase.

Using wrong variable names for age or city.

Use firstName.toUpperCase() to show the name in uppercase, then age and city as declared.