VUE绑定数据闪现问题

xiaoxiao2021-02-28  62

问题描述如下:

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                                    

转载请注明原文地址: https://www.6miu.com/read-76438.html

最新回复(0)