zoukankan      html  css  js  c++  java
  • Vue2.0 【第一季】第4节 v-text & v-html

    Vue2.0 【第一季】第4节 v-text & v-html


    第四节 v-text & v-html

    我们已经会在html中输出data中的值了,我们已经用的是{{xxx}},这种情况是有弊端的,就是当我们网速很慢或者javascript出错时,会暴露我们的{{xxx}},容易引起XSS攻击。Vue给我们提供的v-text,就是解决这个问题的。我们来看代码:

    <span>{{ message }}</span>=<span v-text="message"></span><br/>
    

    完整代码是:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>v-text & v-html</title>
        <script type="text/javascript" src="../assets/js/vue.js"></script>
    </head>
        <body>
            <h1>v-text & v-html 实例</h1>
            <hr>
            <div id="app">
                <span>{{ message }}</span>=<span v-text="message"></span><br/>
            </div>
    
            <script type="text/javascript">
                var app = new Vue({
                    el:'#app',
                    data:{
                        message:'hello Vue!',
                    }
                })
            </script>
        </body>
    </html>
    

    看一下浏览器效果:

    但如果在javascript中写有html标签,用v-text是输出不出来的,这时候我们就需要用v-html标签了。

    <span v-html="msgHtml"></span>
    

    双大括号会将数据解释为纯文本,而非HTML。为了输出真正的HTML,你就需要使用v-html 指令。 需要注意的是:在生产环境中动态渲染HTML是非常危险的,因为容易导致XSS攻击。所以只能在可信的内容上使用v-html,永远不要在用户提交和可操作的网页上使用。 完整代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>v-text & v-html</title>
        <script type="text/javascript" src="../assets/js/vue.js"></script>
    </head>
        <body>
            <h1>v-text & v-html 实例</h1>
            <hr>
            <div id="app">
                <span>{{ message }}</span>=<span v-text="message"></span><br/>
                <span v-html="dodo"></span>  <!--此方式引起xss攻击-->
            </div>
    
            <script type="text/javascript">
                var app = new Vue({
                    el:'#app',
                    data:{
                        message:'hello Vue!',
                        dodo:'<h2>hello world!</h2>'
                    }
                })
            </script>
        </body>
    </html>
    
    Keep moving on!
  • 相关阅读:
    AttributeError: 'DatabaseFeatures' object has no attribute 'autocommits_when_autocommit_is_off'
    mac 添加adb环境变量
    ios环境搭建
    接口自动化测试平台介绍
    听风系统介绍
    nginx启动报错整理
    Mongodb: Sort operation used more than the maximum 33554432 bytes of RAM
    Mac上python 在终端使用pip3安装包报ConnectTimeoutError错误
    crontab -让服务器执行定时任务
    koajs项目之memcached实现session共享
  • 原文地址:https://www.cnblogs.com/Elva3zora/p/12488687.html
Copyright © 2011-2022 走看看