In this article, we will learn to display HTML template form in the browser.Let us see the following example of using HTML template in vue.
<html>
<head>
<title>
<script type=text/javascript src=js/vue.js><script>
<head>
<body>
<div id=dvapp>
<h1>Name:{{name}}<h1>
<h1>Age:{{age}}<h1>
<h1>{{htmlcontent}}<h1>
<div>
<script type=text/javascript>
var vm = new Vue({
el:"#dvapp",
data:
{
name:kanda,
age:26,
htmlcontent:"<div><h1>I am a HTML Template<h1><div>"
},
methods:{
},
});
console.log(vm.name);
console.log(vm.age);
<script>
<body>
<html>
so how will you display html content on the page.if you call it using interpolation then the output will be shown like the below.
<div><h1>I am a HTML Template<h1><div>
But we dont want to see like the above,we want proper html applied to the text.So this can be achieved by using v-html directive.So let us add the v-html directive and see the difference.
<html>
<head>
<title>
<script type=text/javascript src=js/vue.js><script>
<head>
<body>
<div id=dvapp>
<h1>Name:{{name}}<h1>
<h1>Age:{{age}}<h1>
<div v-html="htmlcontent"><div>
<div>
<script type=text/javascript>
var vm = new Vue({
el:"#dvapp",
data:
{
name:kanda,
age:26,
htmlcontent:"<div><h1>I am a HTML Template<h1><div>"
},
methods:{
},
});
console.log(vm.name);
console.log(vm.age);
<script>
<body>
<html>
Now you will see the difference in the output by the screen below.