vue .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: using html vue.js

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