v-cloak、v-text、v-html

最新推荐文章于 2025-06-13 10:14:36 发布

原创最新推荐文章于 2025-06-13 10:14:36 发布 · 253 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

Vue 专栏收录该内容

13 篇文章

订阅专栏

本文深入探讨了Vue.js中的渲染技巧，包括如何使用v-cloak解决插值表达式闪烁问题，v-text与插值表达式的区别，以及v-html指令的应用。通过具体代码示例，展示了如何动态更新页面内容，并保持良好的用户体验。

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

        <!--v-text会覆盖元素中原本的内容，但是 插值表达式 只会替换自己的占位符，不会把整个元素的内容清空-->
        <h4 v-text="msg">----------</h4>
        
        <div v-html="msg2"></div>
    </div>

    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'123',
                msg2:'<h1>h1h1h1h1h1h1h1</h1>'
             },
            methods:{

            }
        })
    </script>