Interpolation

Watch "Template Interpolation" on LinkedIn Learning

Follow along with this video on CodePen

Interpolation with the "Mustache" syntax is the most basic form of data binding in Vue. Any data variable placed between the mustache tag will be replace with it's value.

<div id="app">
  <div>{{ message }}</div>
</div>

The v-once directive will prevent the interpolation from being rendered more than once.

<div id="app">
  <div v-once>{{ message }}</div>
</div>

By default, the data inside a mustache tag will be interpreted as plain text. So, in order to output real HTML, you will need to use the v-html directive instead.

<div id="app">
  <div v-html="message"></div>
</div>

Try it yourself on CodePen