解决vue渲染时闪烁{{}}的问题

Vue页面加载时v-show设置的隐藏元素出现导致页面闪烁问题

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

方法一: v-cloak

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

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

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

// <div> 不会显示，直到编译结束。
[v-cloak] {display: none;
}
<div v-cloak>{{ message }}
</div>

方法二: 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>

解决vue渲染时闪烁{{}}的问题相关推荐

vue渲染时数据对象里面的子对象的属性报错undefined，但页面正常渲染
vue渲染时数据对象里面的子对象的属性报错undefined,但页面正常渲染. 报如图所示错误页面中报错的位置原因是在data中申明了空对象,页面在渲染的时候,数据还没获取到的时候,首先渲染的是初 ...
解决vue插值表达式闪烁问题
在vue项目中,页面加载总有一瞬间可以看到双大括号插值表达式,为了提高用户体验度,在项目中用到了v-cloak <!DOCTYPE html> <html lang="en ...
3d渲染时显示计算机渲染过程,【技巧分享】如何解决3d渲染时出现错误
解决方法是我无意间看到的,然后进行转载转述~ 相信用3d的,有的人可能会遇到用VR渲染的时候,突然出现对话框上面写着:3DSMAX.EXE -应用程序错误.未知的软件异常(0xe06d7363),位置 ...
CSS处理图片渲染时拉伸和挤压变形
CSS解决图片渲染时拉伸和挤压变形的方法背景:商品循环出来需要在固定大小里面,但是商品图片大小商家上传时没有规定图片比例,如果写死图片大小会导致图片渲染是拉伸和挤压变形思路:给图片一个父级容器,父 ...
解决vue初始化数据时的闪烁问题
解决vue初始化数据时的闪烁问题参考文章: (1)解决vue初始化数据时的闪烁问题 (2)https://www.cnblogs.com/xxySsm/p/11971608.html 备忘一下.
vue 动态获取的图片路径不显示_Vue中img的src是动态渲染时不显示的解决
Vue中img的src是动态渲染时不显示的解决今天在项目中遇到一个需求,设计稿如下就是展示用户头像,数据从后端获取,要是没有拿到则显示默认图片. 项目采用vue开发,本人也是第一次在实际项目中使用 ...
前端Vue开发，多关键字搜索时，搜索结果高亮显示(解决输入英文时，会错误的把html标签渲染的问题)
问题背景: 网上搜索关于搜索结果高亮显示,基本上都是单一关键字搜索,或者多关键字搜索,但是没有解决输入英文字符时,把html标签渲染出来的问题,比如在进行多关键字搜索时,可能会进行a;s的搜索, 就 ...
解决表格刷新时抖动闪烁问题
vue+element+el-table渲染数据闪烁功能需求由后端进行分页,前端使用element+el-table+el-pagination(分页).使用axios请求后端数据,实现分页加载表 ...
vue 父页面中的方法调用_解决Vue中页面成功渲染数据undefined的问题
前言这个标题不太好取. 本文需要下面的知识: https://zhuanlan.zhihu.com/p/260811233zhuanlan.zhihu.com 问题描述我最近的一个功能需求是通过 ...

解决vue渲染时闪烁{{}}的问题

Vue页面加载时v-show设置的隐藏元素出现导致页面闪烁问题

方法一: v-cloak

方法二: v-text

解决vue渲染时闪烁{{}}的问题相关推荐

最新文章

热门文章