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.
A. Without html binding:
<template>
<div>
<h3>Your Select Fruits Are: {{ Fruits }}</h3>
<h3>{{ tag }}</h3> // print will be : <h1>With html tag</h1>
</div>
</template>
<script>
export default {
name: "HeaderComponent",
data() {
return {
Fruits : 'Without html tag',
tag : '<h1>With html tag</h1>'
}
}
}
</script>
B. With html binding:
<template>
<div>
<h3>Your Select Fruits Are: {{ Fruits }}</h3>
<h3 v-html="tag"></h3>
// print will be : With html tag
</div>
</template>
<script>
export default {
name: "HeaderComponent",
data() {
return {
Fruits : 'Without html tag',
tag : '<h1>With html tag</h1>'
}
}
}
</script>
