v-html使用

最新推荐文章于 2024-06-22 14:33:40 发布

陌一一

最新推荐文章于 2024-06-22 14:33:40 发布

阅读量1.2k

点赞数

分类专栏： web前端开发文章标签： html vue.js javascript 开发语言前端

本文链接：https://blog.csdn.net/a1598452168YY/article/details/127942881

版权

web前端开发专栏收录该内容

281 篇文章 16 订阅

订阅专栏

<body>
    <div id="box">
        {{mytext}}
    </div>
    <script>
        new Vue({
            el:"#box",
            data:{
                mytext:"<b>加粗的</b>"
            }
        })
    </script>
</body>

结果：

在页面上是不能渲染html的，如果想渲染可以加上v-html。

在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上。

给可信的html代码使用v-html可以渲染：

<body>
    <div id="box">
        <!-- {{mytext}} -->
        <div v-html="mytext"></div>
    </div>
    <script>
        new Vue({
            el:"#box",
            data:{
                mytext:"<b>加粗的</b>"
            }
        })
    </script>
</body>

结果：