vue 解析时表达式闪烁的问题
现象:
在使用 vuejs、angularjs 开发时,经常会遇见浏览器页面闪现表达式 ({{ express }} ), 或者是模块(div)的闪烁。
原因:
由于 JavaScript 去操作DOM,都会等待 DOM 加载完成(DOM ready)。对于 vuejs、angularjs 这些会在 DOM ready 完会才回去解析 html view Template,所以对于 Chrome 这类快速的浏览器你会看见有闪烁的情况出现。而对于IE7,8这类解析稍慢的浏览器大部分情况下是不会出现这个问题的(没验证过....)。
解决办法:
vuejs、angularjs中为我们提供了v-cloak、ng-cloak来实现防止闪烁的方案。
用法(vue 为例):
index.css :
[v-cloak] {
display: none;
}
index.vue :
<div v-cloak>
{{ message }}
</div>
直到 表达式编译完成,div 才会显示
原理:
带有 v-clock 的的元素设置为 display:none,隐藏掉,在等到 vue 解析到带有 v-clock 的节点时候,会把 attribute 和 class 同时remove掉,这样就可以实现防止节点的闪烁。
注意:
在实际使用中,v-for 循环数据时可能会遇到不起作用的现象,要把 v-clock 放在跟 v-for 同一个标签上,仅供参考。
vue 解析时表达式闪烁的问题的更多相关文章
- 防止vuejs在解析时出现闪烁
---## 防止vuejs在解析时出现闪烁 ## 原因: 在使用vuejs.angularjs开发时,经常会遇见在如Chrome这类能够快速解析的浏览器上出现表达式({{ express }} ),或 ...
- vuejs在解析时出现闪烁的原因及防止闪烁的方法
原因: 在使用vuejs.angularjs开发时,经常会遇见在如Chrome这类能够快速解析的浏览器上出现表达式({{ express }} ),或者是模块(div)的闪烁.对于这个问题由于Java ...
- 解决vue解析出现闪烁
原因: 在使用vuejs.angularjs开发时,经常会遇见在如Chrome这类能够快速解析的浏览器上出现表达式({{ express }} ),或者是模块(div)的闪烁.对于这个问题由于Jav ...
- vue刷新页面出现闪烁
在容器里添加v-cloak <div class="box" id="call-no-list" v-cloak></div> 然后在c ...
- VUE基础插值表达式
vue 基本操作插值表达式 首先使用js导入vue.js文件 <style> [v-claok]{ display:none;//解决闪烁问题 } </style> <d ...
- 使用mx:Repeater在删除和添加item时列表闪烁
使用mx:Repeater在删除和添加item时列表闪烁 不可能在用户界面上闪闪的吧,recycleChildren属性可帮助我们 recycleChildren属性==缓存,设为true就可以了 本 ...
- 解决JSP 不解析EL表达式
解决JSP 不解析EL表达式,jsp在使用EL表达式的时候发现它不被解析,而是直接以字符串的形式显示了出来,经过查阅资料和实践,终于得知了原因并找到了解决方案 原因是:在默认情况下,Servlet 2 ...
- ListView用法及加载数据时的闪烁问题和加载数据过慢问题
ListView介绍及添加数据时的闪烁问题 1. ListView类 1.1 ListView常用的基本属性: (1)FullRowSelect:设置是否行选择模式.(默认为false) 提示 ...
- listview滚动时背景闪烁,背景黑或白问题解决
android在使用listview时出现滚动时背景闪烁,变成背景黑或白的问题这样处理: 1:在布局文件中listview标签中加入: android:cacheColorHint="#00 ...
随机推荐
- IDEA Java 源发行版 8 需要目标发行版 1.8
[问题记录] maven新建的一个项目,需要到一些java8的一些特性,但是在编译的时候就报错了,提示这样的错误. 我是在用二进制字面量出现的这个问题,二进制自变量是Java7的特性, 你可以这样写 ...
- 一个包含python和java环境的dockerfile
现在一个项目中遇到python调用java的jar包的环境.为了方便发布,编写了这个dockerfile,作为基础镜像. #this docker file is used to build runt ...
- ARC083E. Bichrome Tree
A viable configuration of the given tree can be divided into two trees, each consists of vertices of ...
- java版MD5签名工具类
package com.net.util; import java.security.MessageDigest; /** * MD5签名工具类 * @author zhangdi * */ publ ...
- Spring4学习回顾之路12-事务
事务:事务就是一系列的动作,它们被当做一个单独的工作单元,这些动作要么全部完成,要么全部不起作用:事务管理是企业级应用程序开发中必不可少的技术,用来确保数据的完整性和一致性.事务的四个关键属性(ACI ...
- Python基础学习路径
1. Python数据结构 1. 基本数据类型(整数.小数.字符) 1.基本数据类型有5种:int bool float complex long 2.每一种数据类型该如何定义 3.数据类型之间可以强 ...
- dfs/bfs专项训练
A.棋盘问题——poj1321 在一个给定形状的棋盘(形状可能是不规则的)上面摆放棋子,棋子没有区别.要求摆放时任意的两个棋子不能放在棋盘中的同一行或者同一列,请编程求解对于给定形状和大小的棋盘,摆放 ...
- 使用haystack实现django全文检索搜索引擎功能
前言 django是python语言的一个web框架,功能强大.配合一些插件可为web网站很方便地添加搜索功能. 搜索引擎使用whoosh,是一个纯python实现的全文搜索引擎,小巧简单. 中文搜索 ...
- WindowsAPI使用详解——GetVersion|GetVersionEx 获取操作系统版本和名称
Windows API 中有两个函数可以得到系统版本信息:GetVersion和GetVersionEx. GetVersion这个函数曾经困扰了很多程序员,其本来设计的是在DWORD返 ...
- WPf ObservableCollection异步调用问题
当ObservableCollection列表被UI线程占用时,如果在异步线程中调用ObservableCollection,会弹出以下异常: private void Button1_OnClick ...