美文网首页前端忐忑历程
解决Vue加载时闪烁

解决Vue加载时闪烁

作者: 小鳄鱼的大哥哦 | 来源:发表于2018-01-06 17:56 被阅读3326次

    实例

    如上图所示,左上角的菜单数据是动态获取的,在获取到数据之前,菜单里是一片空白的。
    取到数据之后,才会将数据填充进去,在这期间会出现闪烁的现象。
    解决办法:使用v-cloak


    html结构如下:

    <ul v-cloak>
      <li v-for="(item, index) in 10" :key="index">{{item}}</li>
    </ul>
    

    第一步,在闪烁元素的最外层添加上一个v-cloak
    第二步,CSS代码

    // 在填充数据之前隐藏
    [v-cloak] {
        display: none;
    }
    

    这里的意思是,在模板初始化钱,隐藏带有v-cloak的标签。



    相关文章

      网友评论

        本文标题:解决Vue加载时闪烁

        本文链接:https://www.haomeiwen.com/subject/ygwynxtx.html