vue v-html code example

Example 1: v-html vue js

// js code
const appFunction = Vue.createApp({
    data(){
        return{

            globalFun1:'hello fun 1',
            globalFun2:'<h2>hello fun 2</h2>',
            textFun:''
        }
    }
    ,
    methods:{
        randFun(){
            const rand = Math.random();
            if (rand <= 0.5){
                alert(this.globalFun1)
            }else{
                alert(this.globalFun2);
            }
        }

    }
})

appFunction.mount('#testfunction');



//html code
    <div  id='testfunction' class="bg-dark">
            <span v-html="globalFun2">

            </span>
<button v-on:click='randFun'>refresh</button>
        </div>

Example 2: vue render html raw

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

Example 3: v-bind Shorthand

<!-- full syntax -->
<a v-bind:href="url"> ... </a>

<!-- shorthand -->
<a :href="url"> ... </a>

<!-- shorthand with dynamic argument (2.6.0+) -->
<a :[key]="url"> ... </a>

Example 4: vue does v-html inject html

return 'Hello <em>World</em>! My name is <my-name :name="$parent.name">
</my-name>!';

Usage will be:
<p v-markup="markup"></p>

When rendered, the above will be identical to doing this:
<p>
    Hello <em>World</em>! My name is <my-name :name="name"></my-name>!
</p>

Example 5: using html vue.js

<div id="app">
  {{ message }}
</div>

Example 6: using html vue.js

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})