Vue Dynamic Template String

Posted on  by admin
You’re browsing the documentation for v2.x and earlier.

For v3.x, click here. Vue.js uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying Vue instance’s data. All Vue.js templates are valid HTML that can be parsed by spec-compliant browsers and HTML parsers.


The most basic form of data binding is text interpolation using the “Mustache” syntax (double curly braces):.

Roy JRoy J

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:.

The double mustaches interprets the data as plain text, not HTML.

In order to output real HTML, you will need to use the v-html directive:. Using mustaches: {{ rawHtml }}. Using 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.

Daniel S. DeboerDaniel S. Deboer

String Templates