vue -- v-cloak解决刷新或者加载出现闪烁(显示变量)
在使用vue绑定数据的时候,渲染页面时会出现变量闪烁,例如
<div class="#app">
<p>{{value.name}}</p>
</div>
在加载的时候会看到
{{value.name}}
在页面出现,过了几秒之后才会渲染数据,在vue中有个指令可以解决这个问题,v-cloak
v-cloak要放在什么位置呢,是不是每个需要渲染数据的标签都要添加这个指令,经过我的试验发现,v-cloak并不需要添加到每个标签,只要在el挂载的标签上添加就可以,
<div class="#app" v-cloak>
<p>{{value.name}}</p>
</div>
而且,在css里面要添加
[v-cloak] {
display: none;
}
这样就可以防止页面闪烁了。
但是有的时候会不起作用,可能的原因有二:
1、v-cloak的display属性被层级更高的给覆盖掉了,所以要提高层级
[v-cloak] {
display: none !important;
}
2、样式放在了@import引入的css文件中
v-cloak的这个样式放在@import 引入的css文件中不起作用,可以放在link引入的css文件里或者内联样式中
vue -- v-cloak解决刷新或者加载出现闪烁(显示变量)的更多相关文章
- vue中v-cloak解决刷新或者加载出现闪烁(显示变量)
在使用vue绑定数据的时候,渲染页面时会出现变量闪烁,例如 <div class="#app"> <p>{{value.name}}</p> & ...
- vue 使用v-cloak让在页面加载时不显示{{}}花括号
官方说法: 这个指令保持在元素上直到关联实例结束编译. 和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准 ...
- vue 首次加载缓慢/刷新后加载缓慢 原因及解决方案
# vue 首次加载缓慢/刷新后加载缓慢 原因及解决方案 最近做项目发现一个问题,页面每次刷新后加载速度都非常慢,20s左右,在开发环境则非常流畅,几乎感觉不到,本文参考望山的各种方案优化 1,关闭打 ...
- 你必须了解的RecyclerView的五大开源项目-解决上拉加载、下拉刷新和添加Header、Footer等问题
前段时间做项目由于采用的MD设计,所以必须要使用RecyclerView全面代替ListView.但是开发中遇到了需要实现RecyclerView上拉加载.下拉刷新和添加Header以及Footer等 ...
- vue使用vant-ui实现上拉加载、下拉刷新和返回顶部
vue使用vant-ui实现上拉加载.下拉刷新和返回顶部 vue现在在移动端常用的ui库有vant-ui和mint-ui,上拉加载.下拉刷新和返回顶部也是移动端最基础最常见的功能.下面就用vant-u ...
- vue超简单加载字体方法,解决scss难加载字体的问题
vue超简单加载字体方法,解决scss难加载字体的问题 scss在加载字体方面一直不太好用,需要繁杂的配置才能达到想要的效果,这里说一种非常简单的方法 在App.vue的style标签下引入字体文件后 ...
- 解决 Github 图片加载慢的问题
一.前言 本文主要介绍一种解决 Github 图片加载慢的方法,亲测有效. 笔者博客是使用 Github 作为图床,每次打开博客时的图片加载很慢或者根本加载不出来.这是因为 GitHub 的 CDN ...
- 移动端下拉刷新、加载更多插件dropload.js(基于jQuery/Zepto)
移动端下拉刷新.加载更多插件dropload.js(基于jQuery/Zepto) 原文:http://www.grycheng.com/?p=1869 废话不多说,先让大家看一下案例效果: DEMO ...
- AngularJS进阶(三十六)AngularJS项目开发技巧之利用Service&Promise&Resolve解决图片预加载问题(后记)
AngularJS项目开发技巧之利用Service&Promise&Resolve解决图片预加载问题(后记) 前言 在"AngularJS项目开发技巧之图片预加载" ...
随机推荐
- bzoj 3192: [JLOI2013]删除物品
Description 箱子再分配问题需要解决如下问题: (1)一共有N个物品,堆成M堆. (2)所有物品都是一样的,但是它们有不同的优先级. (3)你只能够移动某堆中位于顶端的物品. ( ...
- bzoj 3626: [LNOI2014]LCA
Description 给出一个n个节点的有根树(编号为0到n-1,根节点为0).一个点的深度定义为这个节点到根的距离+1.设dep[i]表示点i的深度,LCA(i,j)表示i与j的最近公共祖先.有q ...
- JFinal极速开发框架使用笔记
记录第一次使用JFinal,从简单的框架搭建到增删改查,从自带的方法到正常框架习惯的使用方式. JFinal官网:http://www.jfinal.com/ JFinal 是基于 Java 语言的极 ...
- uniq 命令详解
作用: 报告或忽略文件中的重复行,一般与sort 连用. 选项:-c count 在每列前显示该行重复出现的次数 -d repeated, 仅显示重复出现的行列 -f skip fie ...
- JavaScript及jQuery中的各种宽高属性图解
文/poetries(简书作者)原文链接:http://www.jianshu.com/p/60332df38393 著作权归作者所有,转载请联系作者获得授权, 并标注“简书作者”. 作者声明:本 ...
- SSH远程登录密码尝试
import threading #创建一个登陆日志,记录登陆信息 paramiko.util.log_to_file('paramiko.log') client = paramiko.SSHCli ...
- thinkinginjava学习笔记09_内部类
定义与创建 将一个类定义放在另一个类.方法.作用域.匿名类等地方,就是内部类:内部类只能由外部类对象创建(通过外部方法或者.new方法),内部类对象创建时必须已经有一个外部类对象,并且与之连接(在内部 ...
- npm 项目更换目录后无法启动
问题描述: 使用 Vue-cli 创建的项目,当文件移动到其他目录后,无法正常启动,报错信息如下: 分析原因: npm 项目,在安装依赖(node_modules)的时候,会记录当前的文件路径.当路径 ...
- java基础只关键字final
final关键字简述 final关键字是在编写java程序中出现频率和很高的关键字,如果想要更好的编写java程序,那么掌握final关键字的运用是非常必要的.让我们先看一下final关键字可以修饰的 ...
- mybatis源码学习--spring+mybatis注解方式为什么mybatis的dao接口不需要实现类
相信大家在刚开始学习mybatis注解方式,或者spring+mybatis注解方式的时候,一定会有一个疑问,为什么mybatis的dao接口只需要一个接口,不需要实现类,就可以正常使用,笔者最开始的 ...