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>
Top comments (0)