vue 2 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 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>