zoukankan      html  css  js  c++  java
  • 解决vue渲染时闪烁{{}}的问题

    原文转自: 点我

    Vue页面加载时v-show设置的隐藏元素出现导致页面闪烁问题
    在写APP社区页面的时候在一些地方用了v-show,在刷新页面的时候就发现即便在逻辑判断为false某些元素不该显示时也会露个脸,一闪而过,元素快小还好,如果是特别大的地方就看起来就很不爽,于是就上网搜了下看有没有解决方法,结果还真有。

    方法一: v-cloak
    官方的解释就一句话:这个指令保持在元素上直到关联实例结束编译。
    光看这句话一头雾水,后面紧接着说了用法:

    和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

    也就是说v-cloak指令可以像CSS选择器一样绑定一套CSS样式然后这套CSS会一直生效到实例编译结束。
    示例代码:(亲测可用

    <template>
      <keep-alive include="index">
        <router-view v-cloak></router-view>
      </keep-alive>
    </template>
    
    <style>
      /* 隐藏Vue代码,所有的组件设置成隐藏 */
      [v-cloak]:not(body) {
        display: none;
      }
    </style>
    

      

    方法二: v-text
    vue中我们会将数据包在两个大括号中,然后放到HTML里,但是在vue内部,所有的双括号会被编译成textNode的一个v-text指令。
    而使用v-text的好处就是永远更好的性能,更重要的是可以避免FOUC (Flash of Uncompiled Content) ,也就是上面与遇到的问题。

    示例代码:

    <span v-text="msg"></span>
    <!-- same as -->
    <span>{{msg}}</span>
    

      

  • 相关阅读:
    【转】Shell编程基础篇-上
    【转】inotify+rsync实现实时同步
    Spring
    jdk,jre,tommcat配置问题
    Java前后台开发
    前端组件学习(一)
    报表工具进阶(二)
    查询时异步刷新问题--用到了ajax
    学习jaspersoft/JasperReport
    利用SQLYog操作数据库mysql
  • 原文地址:https://www.cnblogs.com/myfate/p/12032128.html
Copyright © 2011-2022 走看看