Interpolation
Interpolation means putting or rendering your data which is possible very easily using Vue’s double-mustache syntax.

Move forward setup with jsfiddle see this:
Text
Simple interpolation
By using double-mustache syntax you can render your data:
1 |
<span>My name is: {{ myName }}</span> |
Interpolation with expression
Interpolations can contain simple expressions in Vue.
Simple expression interpolation
Here, you can also use JavaScript expressions inside double-mustaches:
1 |
<span>I'm {{ myAge + 5 }} years old!</span> |
However, You can also use methods to manipulate your data and return a string or integer to be rendered:
1 |
<span>My pets' names are {{ myPets.join(", ") }}</span> |
Ternary operator expression interpolation
You can also use a ternary operator to have a simple conditional rendering:
1 |
<span>I'm a {{ myAge > 50 ? 'kinda old' : 'young' }}!</span> |
v-once directive example
You can also perform one-time interpolations that do not update on data change by using the v-once directive, but keep in mind this will also affect any other bindings on the same node:
1 |
<span v-once>This will never change: {{ msg }}</span> |
Render the element and component once only. On subsequent re-renders, the element/component and all its children will be treated as static content and skipped. This can be used to optimize update performance.
Note:
- You can only use one expression inside double-mustaches
- An expression is different than a statement. For example, the code below won’t work because it is not an expression, but a statement:
1 2 |
<!--THIS IS WRONG--> {{ let msg = 'Hello World!'; }} |
- Flow control is not supported in double-mustaches:
1 2 |
<!--THIS IS WRONG--> {{ if(true) { return 'Yes!' } }} |
Raw HTML
If you don’t want to escape your data and render it as real HTML use the v-html
directive:
1 |
<span v-html="myHTMLData"></span> |
The contents of the span
will be replaced with the value of the rawHtml
property, interpreted as plain HTML – data bindings are ignored. Note that you cannot use v-html
to compose template partials, because Vue is not a string-based templating engine. Instead, components are preferred as the fundamental unit for UI reuse and composition.
Warning: Rendering HTML can be risky since it can cause into XSS attacks on your website.
Attributes
Mustaches cannot be used inside HTML attributes. Instead, use a v-bind
directive:
1 |
<div v-bind:id="dynamicId"></div> |
In the case of boolean attributes, where their mere existence implies true
, v-bind
works a little differently. In this example:
1 |
<button v-bind:disabled="isButtonDisabled">Button</button> |
If isButtonDisabled
has the value of null
, undefined
, or false
, the disabled
attributes will not even be included in the rendered <button>
element.
Task for you
As above example, you can see that we use myPets.join(“, “) which cause return the output of My pets’ names are Angular, React, Vue.
How can output return My pets’ names are Angular, React, and Vue?
Try it yourself and share the jsfiddle link with us.