vue绑定数据之前 会看到源代码
2024-09-06 06:32:37
http://blog.csdn.net/fengjingyu168/article/details/72915468
VUE绑定数据闪现问题
问题描述如下:
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
最新文章
- SpringMVC的工作原理
- 如何利用python监控主机存活并邮件、短信通知
- JSP内置对象---response 响应
- Best Practices for Performance_1、2 memory、Tips 性能和小的优化点、 onTrimMemory
- for while (list each)的用法
- mysql:字符串转换为日期类型
- [转]z-order引出的问题
- IIS 之 HTTP Error 404.2 – Not Found(ISAPI 和 CGI 限制)
- STM32 枚举类型和结构体的使用
- RadioButton 和 RadioButtonList 比较
- View的工作原理
- android通过服务实现消息推送
- tensorflow与kubernetes/docker结合使用实践
- JAVA的abstract修饰符 &;&; 接口interface用法 &;&; 抽象类和interface的差别
- sql 根据字段查询不同表
- 数据库安全性操作——操作原则及SQL注入
- directdraw显示yuv420(YV12)
- html页面打开ie浏览器默认打开最高版本
- Log4J.xml配置详解
- Qt 事件