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組合模板。