Raw HTML

Including HTML tags

Let’s now take a look at including HTML tags in Vue.js.

In our script.js we have a posts array, let’s add some HTML to the body of our blog post:

const posts = [
    {
        id: 1,
        title: "Why I learned Vue",
    // Add HTML <strong> tags to text:
        body: "I'm baby chambray street art <strong>thundercats</strong> occupy four loko church-key disrupt. Shaman neutra bushwick chicharrones",
    },
  // ...

And see what happens in the browser:

Rather than the text formatted with the HTML tags, we see the strong tags displayed. This happens because when we use the double curly braces it will output the value as plain text:

<p>{{post.body}}</p>

This makes the curly braces not a good choice for text containing HTML. Instead, Vue provides another directive called v-html.

The v-html directive

As always, we add directives as an attribute, and this will replace our double curly brace syntax:

<p v-html="post.body"></p>

For security reasons we need to be careful when using v-html, and should only inject HTML from trusted sources. For example, we should never use HTML that has been provided by an end user of our site (such as a form input), as this could lead to potential cross site scripting attacks. So do be careful when using this directive that the data is from a trusted source.

Next, we will discover lifecycle hooks in Vue.js.