vue刷新页面时去闪烁提升用户体验效果的实现方法
时间:2018-12-10
这篇文章主要介绍了vue刷新页面时去闪烁提升体验方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
首先在最外层div添加v-if="isReloadAlive
",并创建变量isReloadAlive = true
随后添加provide()以及reload方法,如下:
export default { provide() { return { reload: this.reload } }, data(){ isReloadAlive : true }, methods: { reload() { this.isReloadAlive = false; this.$nextTick(function(){ this.isReloadAlive = true; }) } }
最后调用this.reload()
即可
补充:下面看下vue解决刷新时闪烁问题
1.在vue容器的div里面加上 v-cloak
<div id="app" v-cloak>
2.样式文件中加上
<style type="text/css"> [v-cloak] { display: none !important; } </style>
总结
以上所述是小编给大家介绍的vue刷新页面时去闪烁提升体验方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- 接口测试 | 21 基于flask弄个restful API服务出来
- 数论部分第二节:埃拉托斯特尼筛法 埃拉托斯特尼筛法
- [接口测试 -基础篇] 20 用flask写一个简单server用于接口测试
- 接口测试 | urllib篇 19 urllib基本示例
- 接口测试 | urllib篇 18 urllib介绍
- 【专知-Deeplearning4j深度学习教程01】分布式Java开源深度学习框架DL4j安装使用: 图文+代码
- .Net Core Runtime安装说明
- 【专知-Deeplearning4j深度学习教程02】用ND4J自己动手实现RBM: 图文+代码
- 【专知-Deeplearning4j深度学习教程03】使用多层神经网络分类MNIST数据集:图文+代码
- TypeScript 1.6发布:完全支持React/JSX
- 【专知-Java Deeplearning4j深度学习教程04】使用CNN进行文本分类:图文+代码
- sql server之数据库语句优化
- 【专知-Java Deeplearning4j深度学习教程05】无监督特征提取神器—AutoEncoder:图文+代码
- 平衡树初阶——AVL平衡二叉查找树+三大平衡树(Treap + Splay + SBT)模板【超详解】
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- python实例化对象的具体方法
- PHP5.6.8连接SQL Server 2008 R2数据库常用技巧分析总结
- YII框架关联查询操作示例
- Keras之fit_generator与train_on_batch用法
- django美化后台django-suit的安装配置操作
- python读取excel进行遍历/xlrd模块操作
- 浅谈Keras的Sequential与PyTorch的Sequential的区别
- python 制作python包,封装成可用模块教程
- 使用python脚本自动生成K8S-YAML的方法示例
- Python虚拟环境库virtualenvwrapper安装及使用
- tp5框架内使用tp3.2分页的方法分析
- YII框架常用技巧总结
- PHP连接SQL Server的方法分析【基于thinkPHP5.1框架】
- PHP切割汉字的常用方法实例总结
- Laravel Validator 实现两个或多个字段联合索引唯一