How to bind html in Vue.js

Binding html means, you can bind dynamic html inside of your template. But if you try to render content of dynamic html using mustache syntax or v-text (text binding) you will render the complete html and inner text as a complete string.
Here is the exmaple:

<script>
  export default {
    data(){
      return{
        text: `Check the difference?`,
        html: `<p>I am p tag with <b>bold</b> </p>`
      }
    }
  }
</script>

<template>
  <h1>How to Bind html in Vue.js?</h1>
  <div>{{ html }}</div>
</template>

<style>
</style>

Then what is the solution? You can use v-html binding in vue.js. Here prefix v is reserve for vue.js. You have to use v-html attribute with a empty html tag. The value of the v-html property will be the data property that you have declared in data method.

Here is the example:

<script>
  export default {
    data(){
      return{
        text: `Check the difference?`,
        html: `<p>I am p tag with <b>bold</b> </p>`
      }
    }
  }
</script>

<template>
  <h1>How to Bind html in Vue.js?</h1>
  <div>
    <p v-html="html"></p>
  </div>
</template>

<style>
</style>