Vue内部指令 v-text & v-html

最新推荐文章于 2024-05-06 20:52:53 发布

机灵的小飞机

最新推荐文章于 2024-05-06 20:52:53 发布

阅读量449

点赞数

本文链接：https://blog.csdn.net/weixin_42354407/article/details/104361260

版权

v-text

之前我们学习过大括号表达式 {{ }}
但是这种方式有一些弊端，当网速卡顿或者出现BUG时候就会暴露我们实例中的数据名 {{msg}}
Vue给我们提供了一个内部指令，v-text 来处理这个问题。

核心代码：

<span v-text='msg'><span/>

v-html

当js中穿插 html 代码块时，可以使用 v-html

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-text & v-html</title>
    <script src="../assets/js/vue.js"></script>
</head>
<body>
    <div id="app">
        <span v-text="msg"></span><br/>
        <span v-html="name"></span>
    </div>
    <script>
        const app = new Vue({
            el:'#app' , 
            data: {
                msg:'你好，中国'  , 
                name:'<h1>你好中国<h1/>'
            }
        })
    </script>
</body>
</html>

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

机灵的小飞机

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue内部指令 v-text & v-html

v-text之前我们学习过大括号表达式 {{ }}但是这种方式有一些弊端，当网速卡顿或者出现BUG时候就会暴露我们实例中的数据名 {{msg}}Vue给我们提供了一个内部指令，v-text 来处理这个问题。核心代码：<span v-text='msg'><span/>v-html当js中穿插 html 代码块时，可以使用 v-html...
复制链接

扫一扫