如果我們從服務器端獲取到了HTML字符串，用瀏覽器顯示出來。在Vue框架下，可以用v-html指令來做。例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue demo</title>
</head>
<body>
<script src="./vue.js"></script>
<div id="app">
<div v-html="hello"></div>
</div>
<script>
const app = new Vue({
el: '#app',
data: function () {
return {
hello: "<html>\n" +
"<head>\n" +
" <style type=\"text/css\">\n" +
" #app{\n" +
" width: 600px;\n" +
" height: 600px;\n" +
" background-color: green;\n" +
" margin: auto;\n" +
" color: red;\n" +
" text-align: center;\n" +
" font-size: 60px;\n" +
" }\n" +
" </style>\n" +
"</head>\n" +
"<body>\n" +
"<div id=\"app\">hello world</div>\n" +
"</body>\n" +
"</html>\n"
}
},
})
</script>
</body>
</html>
模板編譯後的匿名函數爲：
function anonymous(
) {
with(this){return _c('div',{attrs:{"id":"app"}},[_c('div',{domProps:{"innerHTML":_s(hello)}})])}
}
從匿名函數中可以看出，v-html指令解析成了innerHTML。所以在節點元素上直接用innerHTML也是可以的，例如：
<html>
<head>
</head>
<body>
<div id="app"></div>
<script>
document.getElementById('app').innerHTML = "<html>\n" +
"<head>\n" +
" <style type=\"text/css\">\n" +
" #app{\n" +
" width: 600px;\n" +
" height: 600px;\n" +
" background-color: green;\n" +
" margin: auto;\n" +
" color: red;\n" +
" text-align: center;\n" +
" font-size: 60px;\n" +
" }\n" +
" </style>\n" +
"</head>\n" +
"<body>\n" +
"<div id=\"app\">hello world</div>\n" +
"</body>\n" +
"</html>\n"
</script>
</body>
</html>