vue通过v-if隐藏的元素在网页加载时闪现

前言

今天用vue做一个h5页面的时候，发现加载页面的时候隐藏的元素闪烁一下消失了，很影响体验。简单分析了一下原因：

原因应该是请求的速度没有网页加载速度快，因为我是使用接口请求的数据判断隐藏与否的，所以就出现了这样的问题。通过上网查资料才解决了这个问题

解决方法

通过vue里面的指令v-cloak就能解决这个问题啦，这个指令的作用就是让js文件加载完成时让你的元素有一个预样式，加载完成再替换掉它

在<head>里面添加预样式：

<style> [v-cloak] {display: none;}

在需要添加预样式的元素绑定v-cloak指令：

 <div id="app" v-cloak></div>

总结

这个平时不起眼的指令居然有这么大的作用，我也是今天遇到问题才第一次了解到它，记录一下，也希望帮助到大家

vue通过v-if隐藏的元素在网页加载时闪现相关推荐

iOS 7.1 的 Safari 为 meta 标签新增 minimal-ui 属性，在网页加载时隐藏地址栏与导航栏...
在过去,用 Safari 打开一个网页后是这样的: 是不是十分不爽?因为顶部的地址栏与底部的导航栏让页面显得非常拥挤,所以用户常常会马上伸手触屏滑动让它们隐藏起来. 始终强调人性化设计的苹果当然注意到 ...
vue加载时闪现模板语法-处理方法
问题:使用VUE时,页面加载瞬间,会闪现模板语法,例如{{ item.name }}等解决办法: 1.可以通过VUE内置的指令v-cloak解决这个问题(推荐) 具体实现: <ul v-clo ...
vue页面加载时闪现_如何解决Vue.js显示数据的时,页面闪现
下面我就为大家分享一篇解决使用Vue.js显示数据的时,页面闪现原始代码的问题,具有很好的参考价值,希望对大家有所帮助. 今天开始学习Vue.js的使用,但是在学习过程中发现一个问题,那就是页面加载数 ...
vue页面加载时闪现_解决使用Vue.js显示数据的时，页面闪现原始代码
今天开始学习Vue.js的使用,但是在学习过程中发现一个问题,那就是页面加载数据时,原始代码会闪现一下.查访各方资料,终的解决方法. 第一步.加入一段css代码 [v-cloak] { display ...
vue 加载页面时触发时间_详解Vue.js在页面加载时执行某个方法
详解Vue.js在页面加载时执行某个方法 jQuery中可以这样写 vue中,如果要达到相同效果,可以使用vue的生命周期函数,如create或者mounted 附上vue.js的生命周期函数执行流程 ...
vue 仿B站下拉刷新上拉加载
vue 仿B站下拉刷新上拉加载功能大部分都是跟B站一样的,还是有一些瑕疵和小bug的,φ(>ω<*) 先上demo连接和gitHub项目地址吧 demo展示 https://github ...
vue跳转页面增加等待_vue-router懒加载时添加loading效果
近期在做一个微信公众号的项目,在页面跳转时发现页面会闪一下,用户体验很不好,而且如果网慢时页面是没有数据的样式会乱很丑.于是乎,就百度看了前人的各种解决方案,个人觉得以下链接中的方案还是很好的,代码简 ...
加载vue文件步骤_无法在重新加载时读取vue文件
我正在使用vue-pdf和vue-server-renderer . 在内部浏览页面时,它工作正常,但在重新加载时,webpack无法在vue-pdf模块中读取.vue文件 . vue-pdf/src ...
网页加载的不同的方式、点击按钮显示一句话、jQuery中获取元素的方法
网页加载的不同的方式 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...

vue通过v-if隐藏的元素在网页加载时闪现

前言

解决方法

vue通过v-if隐藏的元素在网页加载时闪现相关推荐

最新文章

热门文章