Vue 解决插值表达式闪烁问题

Posted 2022-12-07 「已注销」

在Vue中使用插值表达式时，遇到网速慢的情况，就会出现闪烁的问题，我们可以使用v-cloak指令来解决这个问题。

默认情况下：

    <div id="app"> msg </div>

        let app = new Vue(
            el: "#app",
            data: 
                msg: "Hello World!"
            
        )

如果遇到网速慢的情况，页面就会先将插值表达式显示出来：

然后才显示出插值表达式对应的值：

 

解决方法：

（1）给元素添加v-cloak指令

    <div id="app" v-cloak> msg </div>

 （2）添加相关样式

        [v-cloak] 
            display: none;
        

这样，就可以解决插值表达式的闪烁问题。

原理：

页面刚开始加载时，元素的display属性值为none，元素被隐藏。

 

加载完成后，元素便显示出来。