## v-text和v-html
我們已經會在 html 中輸出 data 中的值了,我們已經用的是`{{xxx}}`,這種情況是有弊端的,就是當我們網速很慢或者 javascript 出錯時,會暴露我們的`{{xxx}}`。 Vue 給我們提供的 `v-text` ,就是解決這個問題的。我們來看代碼:
~~~html
<span>{{ message }}</span>=<span v-text="message"></span><br/>
~~~
如果在javascript中寫有html標簽,用v-text是輸出不出來的,這時候我們就需要用v-html標簽了。
~~~html
<span v-html="msgHtml"></span>
~~~
雙大括號會將數據解釋為純文本,而非HTML。為了輸出真正的HTML,你就需要使用v-html 指令。
需要注意的是:在生產環境中動態渲染HTML是非常危險的,因為容易導致XSS攻擊。所以只能在可信的內容上使用v-html,永遠不要在用戶提交和可操作的網頁上使用。
完整代碼:
~~~html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>v-text & v-html 案例</title>
</head>
<body>
<h1>v-text & v-html 案例</h1>
<hr>
<div id="app">
<span>{{ message }}</span>=<span v-text="message"></span><br/>
<span v-html="msgHtml"></span>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
message:'hello Vue!',
msgHtml:'<h2>hello Vue!</h2>'
}
})
</script>
</body>
</html>
~~~