轻松理解插值表达式、v-text 与 v-html 之间的差别

前端基地

已于 2024-06-19 11:08:57 修改

阅读量1.3k

点赞数 20

分类专栏： Vue 3.0从入门到精通文章标签： vue.js 前端 html javascript html5 json node.js

于 2024-06-17 09:12:39 首次发布

本文链接：https://blog.csdn.net/chinayun_6401/article/details/139731420

版权

Vue 3.0从入门到精通专栏收录该内容

26 篇文章

订阅专栏

Vue文本插值

v-text

v-text介绍

v-text 与插值表达式的使用场景及性能解析

v-html

v-html介绍

文本插值、v-text、v-html区别

Vue文本插值

最基础的数据绑定形式即为文本插值，其运用的是双大括号（也就是“Mustache”）这种语法。

示例代码如下：

<!-- 在head中引入vue.js -->     
<script src="./js/vue.global.js"></script>      
<!-- body部分 -->     
<body>  
    <div id="app">  
        <p>------{{msg}}------</p>  
        <p>{{msg}}</p>  
        <p>{{msg.toUpperCase()}}</p>  
        <p>{{msg.toLowerCase()}}</p>  
    </div>  
    <script>  
        const app=Vue.createApp({  
            data(){  
                return{  
                    msg:'MuSTachE'  
                }  
            },  
            mounted(){  
                this.changeData();  
            },  
            methods:{  
                changeData(){  
                    setTimeout(()=>{  
                        this.msg='VuE.js';  
                    },5000);  
                }  
            }  
        })  
        app.mount('#app');  
    </script>  
</body>

在这里，双大括号标签将会被替换成相应组件实例里（例如 msg）属性所对应的值。并且，每当（例如 msg）属性发生改变时，它也会同步进行更新。

运行结果：

而在 5 秒之后的运行结果：

v-text

v-text介绍

在 Vue 中，v-text指令主要起到更新元素文本内容的作用。它能够将绑定的数据值直接呈现为元素的文本，从而覆盖元素原有的文本。并且，一旦数据值发生变化，元素的文本也会随之相应地更新。

其与直接使用插值表达式（{{ }}）较为相似，但在某些特定情形下，可能会更清晰和明确地表示对文本内容的绑定操作。

示例代码如下：

<!-- 在head中引入vue.js -->     
<script src="./js/vue.global.js"></script>      
<!-- body部分 -->     
<body>  
    <div id="app">  
        <p>-----{{msg}}-----</p>  
        <p v-text="msg">----------</p>  
        <p>{{msg}}</p>  
        <p v-text="msg"></p>  
    </div>  
    <script>  
        const app=Vue.createApp({  
            data(){  
                return{  
                    msg:'<a href="javascript:;">链接</a>'  
                }  
            }  
        })  
        app.mount('#app')  
    </script>  
</body>

分析：

v-text会将元素中原本的内容（如：“----------”）覆盖掉，且无法解析 HTML 代码。

<p v-text="msg">----------</p>

若要更新部分的文本内容，则需要运用双大括号（“Mustache” /ˈmʌstæʃ; məˈstæʃ/）语法的文本插值。

<p>-----{{msg}}-----</p>

<p v-text="msg"></p>等价于<p>{{msg}}</p>，也等同于p.innerText=msg。

运行结果：

-----<a href="javascript:;">链接</a>-----

v-text 与插值表达式的使用场景及性能解析

在实际项目中，选择使用 v-text 还是插值表达式可以考虑以下几点：

何时使用 v-text：

当只需要简单、纯粹地显示一个数据值作为文本，且不希望解析任何可能的HTML代码时，v-text能确保文本的准确性和安全性。

如果对文本内容的格式要求非常简单，不需要复杂的动态组合和 HTML 相关操作。

何时使用插值表达式：

当需要在文本中灵活地插入动态数据，并可能与其他文本片段进行组合、包含一些简单的HTML结构（如强调标签等）时，插值表达式更合适。

如果要实现更丰富的文本展示效果，比如包含一些特定样式或交互元素的嵌入。

关于性能方面的考虑因素：

一般来说，两者在性能上的差异并不十分显著，在大多数场景下都能满足需求。

但如果在一个页面中有大量频繁更新的文本元素，可能需要根据具体情况评估是否存在细微的性能差异。在某些极端情况下，可能 v-text 会稍微高效一些，但这通常需要在非常高并发或极端性能敏感的场景下才会体现出来。

总体而言，选择主要还是基于具体的功能需求和代码风格偏好，性能方面通常不是决定因素，除非是在非常特殊的高性能要求的场景下需要仔细权衡。

v-html

v-html介绍

v-html允许将包含 HTML 代码的字符串直接渲染到元素的innerHTML 中。这使得我们可以动态地插入复杂的 HTML 结构，而不仅仅是普通的文本内容。通过将特定的 HTML 片段与数据关联起来，使用 v-html 可以方便地在页面上展示具有丰富格式和结构的动态内容。

然而，需要注意其可能带来的安全风险，如可能被用于注入恶意代码等，在使用时要谨慎评估数据的安全性和来源。

示例代码如下：

<!-- 在head中引入vue.js -->       
<script src="./js/vue.global.js"></script>        
<!-- body部分 -->    
<body>  
    <div id="app">  
        <p v-html="msg">----------</p>  
        <p v-html="msg"></p>  
    </div>  
    <script>  
        const app=Vue.createApp({  
            data(){  
                return {  
                    msg:'<a href="javascript:;">链接</a>'  
                }  
            }  
        })  
        app.mount('#app');  
    </script>  
</body>

分析：

v-html 会将元素中原本的内容“----------”予以覆盖，并且对 html 代码进行解析，相当于 p.innerHTML=msg

<p v-html="msg">----------</p>

运行结果：

链接

文本插值、v-text、v-html区别

在 Vue 的技术体系中，文本插值、v-text 以及 v-html 这三者之间具有显著的区别特征。其中，文本插值所采用的是特定的语法表现形式，例如通过双花括号来实现，其作用主要是针对自身对应的那个占位符部分展开替换工作，而并非是将整个元素原本的内容全部予以清空处理。并且，它不具有对 HTML 代码进行解析的能力。值得一提的是，当处于网络传输速度较为缓慢的情形时，有可能会出现闪烁这样的现象。

而 v-text 的运作机制是会对元素中原本所具有的内容实施覆盖式的替换操作，它同样不具备对 HTML 代码进行解析的功能，并且在默认的状况下，通常是不会产生闪烁这一问题的。

至于 v-html ，它同样会对元素中原有的内容进行覆盖处理，不过其突出的特点在于它具备强大的解析 HTML 代码的能力，而且在默认的情况下一般也不会出现闪烁这种问题。