屏闪问题

weixin_41450557

于 2019-11-05 11:59:35 发布

阅读量203

点赞数

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/weixin_41450557/article/details/102913213

版权

Vue 专栏收录该内容

10 篇文章

订阅专栏

在简单项目中，网络较慢时，vue.js还在加载，导致vue来不及渲染，这事原页面就显示原始页面，可以通过v-cloak来解决这个问题。

其中js不变，在div中加入v-cloak，将[v-cloak]的样式中的display设置为none；

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Hello World</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <h1>{{msg}}</h1>
</div>

<script src="../vue.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            msg:"hello world!"
        }
    })
</script>