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

Posted 2021-08-15 乱舞春秋__

在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，元素被隐藏。

 

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