v html vue js

1// js code
2const appFunction = Vue.createApp({
3    data(){
4        return{
5
6            globalFun1:'hello fun 1',
7            globalFun2:'<h2>hello fun 2</h2>',
8            textFun:''
9        }
10    }
11    ,
12    methods:{
13        randFun(){
14            const rand = Math.random();
15            if (rand <= 0.5){
16                alert(this.globalFun1)
17            }else{
18                alert(this.globalFun2);
19            }
20        }
21
22    }
23})
24
25appFunction.mount('#testfunction');
26
27
28
29//html code
30    <div  id='testfunction' class="bg-dark">
31            <span v-html="globalFun2">
32
33            </span>
34<button v-on:click='randFun'>refresh</button>
35        </div>

1return 'Hello <em>World</em>! My name is <my-name :name="$parent.name">
2</my-name>!';
3
4Usage will be:
5<p v-markup="markup"></p>
6
7When rendered, the above will be identical to doing this:
8<p>
9    Hello <em>World</em>! My name is <my-name :name="name"></my-name>!
10</p>