v-html的作用是设置和修改innerHTML。
下面来看看示例程序：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue v-html</title>
<script src="https://cdn.bootcss.com/vue/2.6.2/vue.min.js"></script>
</head>
<body>
<div id="test1">
<div v-html="text1"></div>
<input type="button" value="修改内部样式" @click="change()">
</div>
<script>
var vm1=new Vue({
el:'#test1',
data:{
text1:"<div id=\"test\"><div>Name is :{{name}}</div><div>Local Name is: {{jifukui[0].name}}</div></div>"
},
methods:{
change:function(){
this.text1="<div id=\"test\"><div>name is :{{name}}</div><div>Local name is: {{jifukui[0].name}}</div></div>"
}
}
});
var vm = new Vue({
el: '#test',
data: {
name:"hahahhaha" ,
jifukui:[
{
name:"jifukui"
}
]
},
});
</script>
</body>
</html>
程序设计思路：
（1）程序中包含两个vue示例vm1挂载在test1上，text1包含一个<div>的标签用于插入v-html，还有一个<input>标签用于设置改变<div>标签中的v-html的内容。
（2）第二个vue实例挂载在test上进行插值。
程序结果：
（1）默认样式
可以明显的看到vm1实例被渲染且vm实例也被渲染，从红色方框中的内容可以看到就是v-html的值text1的值。
（2）点击后的样式
点击后可以看到text1的值发生了改变，但是其中的关于vm实例中的内容没有被绑定替换。所以一般使用v-html进行设置和修改innerHTML的值，所以尽量不要使用v-html组合模板。