vue——4-v-text v-html v-cloak

最新推荐文章于 2025-06-11 21:30:03 发布

原创最新推荐文章于 2025-06-11 21:30:03 发布 · 921 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

74 篇文章

订阅专栏

本文深入探讨了Vue.js中v-text和v-html指令的使用方法及其区别。v-text用于向DOM元素注入文本，而v-html则用于注入HTML内容，但后者因潜在的安全风险需谨慎使用。此外，还介绍了如何使用v-cloak解决插值表达式渲染闪烁的问题。

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

v-text v-html

<div id="enjoy">
    <!--之后拼接文本会显示-->
    <p>{{msg}} lucy</p>
    
    <!--v-text往标签注入文本，之后拼接文本不会显示-->
    <p v-text="msg"> lucy</p>
    
    <!--不可以向里面添加html标签-->
    <div>{{html}}</div>
    
    <!--v-html往标签注入html标签，之后拼接文本不会显示-->
    <!--注：v-html慎用，不安全-->
    <div v-html="html">
        {{html}}
        <input type="text">
    </div>
</div>

这里写图片描述

        {
            new Vue({
                el:'#enjoy',
                data:{
                    msg:'hello!',
                    html:'<input type="date"><br><input type="color">'
                }
            })
        }

v-cloak

css

[v-cloak]{
            display: none;
        }

html

<div id="enjoy">
    <!--使用v-cloak能够解决 插值表达式（ {{}} ）渲染闪烁的问题-->
    <p v-cloak>{{msg}}</p>
</div>

        {
            new Vue({
                el:'#enjoy',
                data:{
                    msg:'hello!'
                }
            })
        }