Displaying HTML

Now that we know that text interpolations can't render HTML for security reasons, we will need another way to render dynamic HTML--the v-html directive. Like the v-model directive we saw in Chapter 1, Getting Started with Vue, this is a special attribute that adds a new feature to our template. This one is able to render any valid HTML string into our app. Just pass the string as the value, as follows:

<!-- Preview pane -->
<aside class="preview" v-html="notePreview">
</aside>

Now, the markdown preview should work correctly, and the HTML is dynamically inserted in our page.

Any content inside our aside element will be replaced by the value of the v-html directive. You can use this to put placeholder contents inside.

Here is the result you should have:

There is an equivalent directive for text interpolation, v-text, which behaves like v-html, but escapes the HTML tags just like classic text interpolations.