解决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>

  

原文地址:https://www.cnblogs.com/myfate/p/12032128.html

时间: 2024-10-11 02:39:26

解决vue渲染时闪烁{{}}的问题的相关文章

解决vue解析出现闪烁

原因: 在使用vuejs.angularjs开发时,经常会遇见在如Chrome这类能够快速解析的浏览器上出现表达式({{ express }} ),或者是模块(div)的闪烁.对于这个问题由于JavaScript去操作DOM,都会等待DOM加载完成(DOM ready).对于vuejs.angularjs这些会在DOM ready完会才回去解析html view Template,所以对于Chrome这类快速的浏览器你会看见有闪烁的情况出现.而对于IE7,8这类解析稍慢的浏览器大部分情况下是不会

解决vue安装时出现vue --version或vue不是内部命令的问题

1. 试图全局配置 vue 的环境变量,找到 vue.cmd 的路径,然后进行配置. 问题:在文件搜索中,没有找到 vue.cmd,失败. 1.npm i npm -g 全局 update 了 npm 的版本,为 5.x.x 2.npm i vue-cli -g 此时,输入vue --version检查是否出现版号,若不行,继续下一步,如果可以,问题解决 3.cnpm i vue-cli -g vue.cmd 文件出现,路径为:C:\Users\ada\AppData\Roaming\npm\v

vue 之img的src是动态渲染时(即 :src=&#39; &#39; )不显示 踩坑

问题: <img :src="item.image ? `../../assets/image/${item.image}` : ''" alt="image"/> 解决方法: 加上require() 即可 <img :src="item.image ? require(`../../assets/image/${item.image}`) : ''" alt="image"/> vue 之img的sr

解决使用angularjs时页面因为{{ }}闪烁问题的两种方式ngBind,ngCloak

1.HTML加载含有{{ }}语法的元素后并不会立刻渲染它们,导致未渲染内容闪烁(Flash of Unrendered Content,FOUC).我可以用ng-bind将内容同元素绑定在一起避免FOUC.内容会被当作子文本节点渲染到含有ng-bind指令的元素内. 2.除使用ng-bind来避免未渲染元素闪烁,还可以在含有{{ }}的元素上使用ng-cloak指令,ng-cloak指令会将内部元素隐藏,直到路由调用对应的页面时才显示出来.   下面主要演示下如何通过ng-cloak避免FOU

当Vue中img的src是动态渲染时不显示问题

最近遇见动态渲染img时,想起了当初刚开始写vue时,曾经遇见的一个小小坑. Vue中:img的src属性是动态渲染时不显示问题1.需求:展示用户头像,数据从后台获取,如果没有拿到则显示默认图片. 如图: 2.第一次写: 如图: 3.结果(汗...)并没有显示默认图片来代替: 审查元素发现没显示默认的图片,图片没有被打包.... 如图: 4.解决方案: 1.使用require引入图片 2.使用img的onerror属性 原文地址:https://www.cnblogs.com/xiaoqi201

解决绘图时闪烁问题的一点经验

2015-05 由于作图过于复杂和频繁,所以时常出现闪烁的情况,一些防止闪烁的方法,如下: (1)将Invalidate()替换为InvalidateRect(). Invalidate()会导致整个窗口的图象重画,需要的时间比较长,而InvalidateRect()仅仅重画Rect区域内的内容,所以所需时间会少一些.不要为一小块区域的重画就调用Invalidate(),不愿意自己去计算需要重画的Rect,事实上,如果你确实需要改善闪烁的情况,计算一个Rect所用的时间比起重画那些不需要重画的内

[记录]解决vue项目当直接通过url访问中间页时nginx返回404的问题

应用为VUE单页应用,路由模式为history,web服务器为nginx,正常情况下如果直接通过url访问一个中间页(不是index.html)时,会看到nginx返回的404错误,这个问题目前我只能通过修改nginx站点配置文件来实现. 具体代码(只看红色加粗的部分就行): server { listen 80; server_name ……; index index.php index.html index.htm default.php default.htm default.html;

解决webstorm拉取Vue项目时卡顿,及内存爆满问题

最近在拉取Vue项目时总是会出现webstorm内存瞬间爆满,导致webstorm卡死,而且,有时在下载完node_modues后webstorm一直处于updating中,为此在网上找了很多方法结果效果不怎么理想,然后自己就接着捣鼓,终于捣鼓出来了.下面就是方法: 1.打开webstorm,然后依照此路径(files->settings->editor->File Types->ignore files and folders)打开在其输入框中添加"node_modul

终极解决maya渲染层丢材质,变线框等问题

终极解决maya渲染层丢材质,变线框等问题 相信有很多同志在使用maya做灯光渲染的时候,经常能遇到渲染层的模型丢材质.变线框等问题,特别恶心.我也经常遇到,所以和大家分享一下我的解决或尽量避免的方法. 引用文件(Reference)工作原理: 引用文件在生产中以层级的方式来工作,每个层级都可以同时做不同的工作. 当创建完引用文件后,在当前场景里会保存引用对象的原始数据,并且所有编辑修改的数据都会储存在引用节点(Reference)里,也就是当前的maya文件里. 当打开当前场景文件时数据是从低