Interpolation {{}}
Double curly braces print data or a small expression right inside your HTML.
In this page:
Syntax
<p>{{ expression }}</p>
<p>{{ message.toUpperCase() }}</p>Interpolation {{}}
Mustache interpolation evaluates a JavaScript expression and inserts the result as text. It supports simple expressions such as arithmetic, ternaries and method calls, but not statements.
Text is escaped, so HTML in data is shown as text, and v-html renders raw HTML (use with trusted content only).
Note:
Never use v-html with user-provided content: it opens the door to XSS.
Example: Interpolation {{}}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<p>{{ name }} is {{ age }} years old</p>
<p>Next year: {{ age + 1 }}</p>
<p>{{ age >= 18 ? "adult" : "minor" }}</p>
<p>{{ html }}</p>
<p v-html="html"></p>
</div>
<script>
Vue.createApp({
data() { return { name: "Ada", age: 36, html: "<b>bold</b>" }; },
}).mount("#app");
</script>
</body>
</html>
<!-- Output:
Rendered: Ada is 36 years oldNext year: 37adult<b>bold</b>bold
-->Live Example
Related Topics
Common Mistakes
- Using statements like if or for inside braces
- Expecting HTML to render with mustaches
- Putting heavy logic in the template
Chapter Summary
- {{ }} prints expression results
- Only expressions, not statements
- Output is escaped
- v-html renders raw HTML
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: