七、v-text和v-html指令_java类似v-html的方法-优快云博客

本文链接：https://blog.youkuaiyun.com/newbie_907486852/article/details/83421653

本文详细介绍了Vue框架中v-text和v-html指令的使用方法及区别。v-text用于安全地输出文本，避免{{ }

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

v-text和v-html指令

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

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

如果在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">
    <title>v-text & v-html 实例</title>
    <!--引入Vue.js-->
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>v-for实例</h1>
    <hr>
    排序的用法：
    <div id="app">
        <span>{{ message }}</span>
        <br/>
        <span v-text="message"></span>
        <hr/>
        <span v-html="msgHtml"></span>
    </div>

    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                message:"{{ message }}  等于 v-text=\"message\"",
                msgHtml:'<h2>hello Vue!</h2>'
            }
        })
    </script>
</body>
</html>