VueJS Baby Step - Interpolation

Table of Contents

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:

See More:

VueJS Baby Step Tutorial Part -1
Learning a new framework can be a very daunting process...

Text

Simple interpolation

By using double-mustache syntax you can render your data:

PHP
<span>My name is: {{ myName }}</span>

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:

PHP
<span>I'm {{ myAge + 5 }} years old!</span>

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:

&lt;span&gt;My pets' names are {{ myPets.join(", ") }}&lt;/span&gt;

1

&lt;span&gt;My pets' names are {{ myPets.join(", ") }}&lt;/span&gt;

Ternary operator expression interpolation

You can also use a ternary operator to have a simple conditional rendering:

PHP
<span>I'm a {{ myAge > 50 ? 'kinda old' : 'young' }}!</span>

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:

<span v-once>This will never change: {{ msg }}</span>

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:

PHP
<!--THIS IS WRONG--> 
{{ let msg = 'Hello World!'; }}



1
2

<!--THIS IS WRONG--> 
{{ let msg = 'Hello World!'; }}

Flow control is not supported in double-mustaches:

PHP
<!--THIS IS WRONG--> 
{{ if(true) { return 'Yes!' } }}



1
2

<!--THIS IS WRONG--> 
{{ if(true) { return 'Yes!' } }}

Raw HTML

See More:

What is ES6 Triple dots in Javascript? Why you should know about it?
In this article, we are going to discuss a feature...

If you don’t want to escape your data and render it as real HTML use the v-html directive:

&lt;span v-html="myHTMLData"&gt;&lt;/span&gt;

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:

<div v-bind:id="dynamicId"></div>

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:

<button v-bind:disabled="isButtonDisabled">Button</button>

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.