You need to use v-html directive to show any html output in VueJS. See the example below:
<html lang=
"en"
>
<div id=
"app"
>
<div v-html=
"content"
>
You need to use v-html directive to show any html output in VueJS. See the example below:
<html lang=
"en"
>
<div id=
"app"
>
<div v-html=
"content"
>
new
Vue ({
el:
'#app'
,
data: {
content:
'
Hello World
'
}
})
Hello World
You need to use v-bind directive to display any image in VueJS. The general syntax (“Mustache” syntax) will not work here. Let us first give an example with general template syntax:
VueJs Instance
<div id =
"app"
>
Firstname : {{firstname}}
Lastname : {{lastname}}
<div v-html =
"htmlcontent"
>
<img src =
"{{imgsrc}}"
width =
"300"
height =
"250"
/>
<script type=
"text/javascript"
>
var
vm =
new
Vue({
el:
'#app'
,
data: {
firstname :
"Tortoiz"
,
lastname :
"Themes"
,
htmlcontent :
"
Vue Js Template
"
,
}
})
VueJs Instance
<div id =
"app"
>
Firstname : {{firstname}}
Lastname : {{lastname}}
<div v-html =
"htmlcontent"
>
<img v-bind:src =
"imgsrc"
width =
"300"
height =
"250"
/>
<script type=
"text/javascript"
>
var
vm =
new
Vue({
el:
'#app'
,
data: {
firstname :
"Tortoiz"
,
lastname :
"Themes"
,
htmlcontent :
"
Vue Js Template
"
,
}
})
<html lang=
"en"
>
<div id=
"app"
>
<div v-show=
"show"
>Hello World!
new
Vue ({
el:
'#app'
,
data: {
show: true
}
})
<html lang=
"en"
>
<div id=
"app"
>
<div v-show=
"show"
>Hello World!
new
Vue ({
el:
'#app'
,
data: {
show: false
}
})