Vue v-cloak 解决页面闪烁

Vue About 810 words

现象

在非工程化的项目中（直接引入Vue.js文件在HTML文件中使用），如果有耗时操作没让页面加载完，会显示{{}}，且页面会刷新。

v-cloak

使用v-cloak可以解决这类问题。通常与display: none一起使用，在未加载完成前不显示DOM，加载完成后再显示。

CSS上可以配合!important一起使用。

备注：工程化的项目（使用vue-cli创建的项目）不需要v-cloak，因为已经有一个空的div。

使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/vue@2.6.12.js"></script>
    <style>
        [v-cloak]{
            display: none !important;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>

    {{ message }}

</div>

<script>
    const vm = new Vue({
        el: "#app",
        data: {
            message: "zhangsan"
        },
    });
</script>

</body>
</html>

参考

https://cn.vuejs.org/v2/api/#v-cloak

Views: 1,153 · Posted: 2023-01-02

———— END ————

Give me a Star, Thanks:)

https://github.com/fendoudebb/LiteNote

扫描下方二维码关注公众号和小程序↓↓↓