VUE绑定数据闪现问题

最新推荐文章于 2023-12-01 21:30:00 发布

pobu168

最新推荐文章于 2023-12-01 21:30:00 发布

阅读量3k

点赞数

分类专栏： Vue 文章标签： Vue 闪现前端

本文链接：https://blog.csdn.net/fengjingyu168/article/details/72915468

版权

Vue 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

问题描述如下：

1、在HTML中使用Vue为div绑定数据，方式如下：

	<div>{{area_nums}}</div>

2、在Vue实例中声明变量并给初始值，在页面加载时请求后台数据，重新赋值

let app = new Vue({
    el: '#app',
    data: {
        area_nums: 0,
    }，

    created: function () {
     // 此处请求数据，为area_nums赋值
   },

})

3、在页面渲染时，短暂出现{{area_nums}}，后加载数据，请求后台数据需要时间，但为何不是直接显示初始值0，

而加载成{{area_nums}}呢？

原因：

由于JavaScript去操作DOM，都会等待DOM加载完成（DOM ready）。对于vuejs、angularjs这些会在DOM ready完会才回去解析html view Template，

所以对于Chrome这类快速的浏览器你会看见有闪烁的情况出现。而对于IE7，8这类解析稍慢的浏览器大部分情况下是不会出现这个问题的。（别处借来的）

解决方法：

1、使用 v-cloak

   标签中直接使用v-cloak ，

   样式中添加

	[v-cloak] {
   	  display: none;
 	}
这段 CSS 的含义是，包含 v-cloak (cloak n. 披风，斗篷；vt. 遮盖，掩盖) 属性的 html 标签在页面初始化时会被隐藏。
在 vuejs instance ready 之后，v-cloak 属性会被自动去除，也就是对应的标签会变为可见。

具体见下面出处链接：http://www.cnblogs.com/slly/p/5884656.html

http://www.sunzhongwei.com/hide-vuejs-variable-with-v-cloak-when-page-loading