VueJS Baby Step – Interpolation

1+

Interpolation

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

Interpolation
Interpolation

Move forward setup with jsfiddle see this:

Text

Simple interpolation

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

Interpolation with expression

Interpolations can contain simple expressions in Vue.

Simple expression interpolation

Here, you can also use JavaScript expressions inside double-mustaches:

However, You can also use methods to manipulate your data and return a string or integer to be rendered:

Ternary operator expression interpolation

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

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:

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:
  • Flow control is not supported in double-mustaches:

Raw HTML

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


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:

In the case of boolean attributes, where their mere existence implies truev-bind works a little differently. In this example:

If isButtonDisabled has the value of nullundefined, 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.

1+