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">Vue Js Part: 7 (HTML Output Template Syntax)
new Vue ({ el: '#app', data: { content: '
Hello World
'
} }) Output:
Hello World
Display Image in VueJS
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
"
, }}) Notice, can’t get the image!
Let us now look at an example of displaying images using v-bind directive:
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
"
, }}) Value show or hide toggling Template Syntax of HTML Element in VueJS:
Value show or hide toggling Template Syntax of HTML Element in VueJS:
To show or hide toggling the output of any html element in VueJS, you also need to use v-show directive. And it basically does the job using the CSS display property. However, it does not support the element, nor does it work with v-else and v-else-if. See the example below:
<html lang="en"> <div id="app"> <div v-show="show">Hello World!
new Vue ({ el: '#app', data: { show: true } }) Output
See another example:
<html lang="en"> <div id="app"> <div v-show="show">Hello World!
new Vue ({ el: '#app', data: { show: false } }) Output
