在开发Vue项目时，页面加载时出现闪烁问题

陈善强

于 2019-12-08 23:00:07 发布

阅读量752

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： v-clock

本文链接：https://blog.youkuaiyun.com/chenshanqiang/article/details/103450638

Vue 专栏收录该内容

24 篇文章

订阅专栏

本文介绍如何利用Vue.js的v-cloak指令解决页面加载时的闪烁问题，通过CSS样式控制未渲染区域的显示状态，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用v-cloak指令防止页面加载时出现闪烁问题

<style type="text/css">
  /* 
    1、通过属性选择器 选择到 带有属性 v-cloak的标签  让他隐藏
 */
  [v-cloak]{
    /* 元素隐藏  */
    display: none;
  }
</style>
<body>
  <div id="app">
    <!-- 2、 让带有插值 语法的添加 v-cloak 属性 
      在数据渲染完场之后，v-cloak 属性会被自动去除，
      v-cloak一旦移除也就是没有这个属性了属性选择
      器就选择不到该标签也就是对应的标签会变为可见
    -->
    <div v-cloak>{{msg}}</div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'Hello Vue'
      }
    });
</script>
</body>
</html>