在使用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解决刷新或者加载出现闪烁(显示变量)的更多相关文章

  1. vue中v-cloak解决刷新或者加载出现闪烁(显示变量)

    在使用vue绑定数据的时候,渲染页面时会出现变量闪烁,例如 <div class="#app"> <p>{{value.name}}</p> & ...

  2. vue 使用v-cloak让在页面加载时不显示{{}}花括号

    官方说法: 这个指令保持在元素上直到关联实例结束编译. 和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准 ...

  3. vue 首次加载缓慢/刷新后加载缓慢 原因及解决方案

    # vue 首次加载缓慢/刷新后加载缓慢 原因及解决方案 最近做项目发现一个问题,页面每次刷新后加载速度都非常慢,20s左右,在开发环境则非常流畅,几乎感觉不到,本文参考望山的各种方案优化 1,关闭打 ...

  4. 你必须了解的RecyclerView的五大开源项目-解决上拉加载、下拉刷新和添加Header、Footer等问题

    前段时间做项目由于采用的MD设计,所以必须要使用RecyclerView全面代替ListView.但是开发中遇到了需要实现RecyclerView上拉加载.下拉刷新和添加Header以及Footer等 ...

  5. vue使用vant-ui实现上拉加载、下拉刷新和返回顶部

    vue使用vant-ui实现上拉加载.下拉刷新和返回顶部 vue现在在移动端常用的ui库有vant-ui和mint-ui,上拉加载.下拉刷新和返回顶部也是移动端最基础最常见的功能.下面就用vant-u ...

  6. vue超简单加载字体方法,解决scss难加载字体的问题

    vue超简单加载字体方法,解决scss难加载字体的问题 scss在加载字体方面一直不太好用,需要繁杂的配置才能达到想要的效果,这里说一种非常简单的方法 在App.vue的style标签下引入字体文件后 ...

  7. 解决 Github 图片加载慢的问题

    一.前言 本文主要介绍一种解决 Github 图片加载慢的方法,亲测有效. 笔者博客是使用 Github 作为图床,每次打开博客时的图片加载很慢或者根本加载不出来.这是因为 GitHub 的 CDN ...

  8. 移动端下拉刷新、加载更多插件dropload.js(基于jQuery/Zepto)

    移动端下拉刷新.加载更多插件dropload.js(基于jQuery/Zepto) 原文:http://www.grycheng.com/?p=1869 废话不多说,先让大家看一下案例效果: DEMO ...

  9. AngularJS进阶(三十六)AngularJS项目开发技巧之利用Service&Promise&Resolve解决图片预加载问题(后记)

    AngularJS项目开发技巧之利用Service&Promise&Resolve解决图片预加载问题(后记) 前言 在"AngularJS项目开发技巧之图片预加载" ...

随机推荐

  1. 某次送温暖考试的 c题

    题目大意: 给定n个点的无根树,树上每个点都有一个非负的点权. 树上的路径的价值定义为树上路径的点权和-树上路径的点权最大值; 现在给定一个参数P询问有多少条路径的价值是P的倍数(注意单点也算路径,路 ...

  2. Hello TensorFlow

    官方说明:https://www.tensorflow.org/install/ 环境: 操作系统 :Windows 10 家庭中文版 处理器 : Intel(R) Core(TM) i7-7700 ...

  3. 微信公众号H5支付遇到的那些坑

    简史 官方文档说的很清楚,商户已有H5商城网站,用户通过消息或扫描二维码在微信内打开网页时,可以调用微信支付完成下单购买的流程. 当然,最近微信支付平台也加入了纯H5支付,也就是说用户可以在微信以外的 ...

  4. JavaScript函数补完:toString()

    javascript中的toString()方法,主要用于Array.Boolean.Date.Error.Function.Number等对象.下面是这些方法的一些解析和简单应用,做个纪律,以作备忘 ...

  5. Asp.net MVC在Razor中输出Html的两种方式

    http://qubernet.blog.163.com/blog/static/177947284201485104616368/ Razor中所有的Html都会自动编码,这样就不需要我们手动去编码 ...

  6. java中的位操作

    之前做项目的时候使用位操作不是很多,今天在刷leetcode上题目的时候用到了位操作,是leetcode中的第29题Divide Two Integers. 一.java的位操作: 位运算表达式由操作 ...

  7. Linux 文件路径包含特殊字符的处理方式

    文件路径包含特殊字符的处理方式 1)只用转义符 \ 2)使用双引号 mv /home/".Sent Items"/ /home/".&XfJT0ZABkK5O9g ...

  8. Excel数据导入至Dataset中

    public static DataSet ExcelToDataSet(string ppfilenameurl,string pptable) { string strConn = "P ...

  9. CRUL学习记录

    在学习web相关知识的时候,了解到crul可以对网址进行请求,并可以看到网站的响应. 1.curl获取web网站返回的网页内容 命令:curl http://XXXXX 2.curl查看web网站的s ...

  10. 中文版microbit:TurnipBit显示动态滚动字符教程实例

    随着当今社会的发展,社会的进步,家长们越来越忙碌,致使家长们在孩子成长过程中陪孩子的互动的时间越来越少,为此,TurnipSmart公司制作的一款MicroPython开发板--TurnipBit,这 ...