使用 v-cloak 防止页面加载时出现 vuejs 的变量名
使用 vuejs 做了一个简单的功能页面,逻辑是,页面加载后获取当前的经纬度,然后通过 ajax 从后台拉取附近的小区列表。但是 bug 出现了,在显示小区列表之前,会闪现小区名对应的 vuejs 变量名。
案发现场的 HTML 代码
<ul v-for="item in items"><li>{{ item.name }}</li>
</ul>
页面加载时,会闪现
{{ item.name }}
Google 了一下,发现 vuejs 内置的 directive v-cloak 可以解决这个问题。非常简单
HTML 修改成
<ul v-cloak v-for="item in items"><li>{{ item.name }}</li>
</ul>
CSS 中添加
[v-cloak] {display: none;
}
搞定!
但是原理是什么呢?
这段 CSS 的含义是,包含 v-cloak (cloak n. 披风,斗篷;vt. 遮盖,掩盖) 属性的 html 标签在页面初始化时会被隐藏。
来自http://www.sunzhongwei.com/hide-vuejs-variable-with-v-cloak-when-page-loading
转载于:https://www.cnblogs.com/chongyao/p/7121848.html
使用 v-cloak 防止页面加载时出现 vuejs 的变量名相关推荐
- Javascript在页面加载时的执行顺序
一.在HTML中嵌入Javasript的方法 直接在Javascript代码放在标记对<script>和</script>之间 由<script />标记的src属 ...
- Javascript在页面加载时的执行顺序(转载)
原文:http://dancewithnet.com/2007/03/22/order-of-execution-of-javascript-on-web/ 一.在HTML中嵌入Javasript的方 ...
- 加载页面就触发ajax,AJAX post方法,有时会在页面加载时触发,有时不会
我对AJAX有一个奇怪的问题,我在页面加载时使用AJAX POST方法返回对象地图. 我正在调试该过程,有时会调用该方法,并且Java Servlet有时会运行. 我正确地包含了JS导入,其他jQue ...
- 解决JS文件页面加载时的阻塞
关于页面加载时的时间消费,许多书中都做出了介绍,也提出了很多种方法.本文章就详细介绍XHR注入. 概述:JS分拆的方法 1.XHR注入:就是用ajax异步请求同域包含脚本的文件,然后将返回的字符串转化 ...
- chromium禁用ajax,页面加载时,jQuery AJAX不会在Chrome / Chromium中启动
| 场景:我拥有的是一个上传表单,该表单使用nginx uploadProgress模块报告上传进度.下面的代码在Firefox中可以正常工作,但是使用Chrome和Chromium时,页面加载时 ...
- html禁止页面动画,如何在页面加载时阻止CSS动画?
我有一个动画,它负责按钮悬停状态下的淡入和淡出过渡. 问题是默认动画(-webkit-animation:off-state 1s;)在页面加载时触发.如何在第一个悬停状态后才使其处于活动状态? 我知 ...
- Axure 如何在页面加载时,设置文本框的内容为当前日期
添加一个文本框,并设置文本框的属性为"日期"类型 点击页面空白处,添加一个交互,页面加载时- > 设置文本 ->目标元件(刚刚新添加的文本框) 值设置,点击后面的fx ...
- html js页面加载前执行,Javascript代码在页面加载时的执行顺序介绍
一.在HTML中嵌入Javasript的方法 1.直接在Javascript代码放在标记对之间 2.由标记的src属性制定外部的js文件 3.放在事件处理程序中,比如: 点击我 4.作为URL的主体, ...
- 页面加载时就请求ajax,页面加载时发送Ajax请求
如下所示代码,我想在页面加载时判断是否已经保存有cookie,如果有则直接发送ajax请求显示上一次的结果页面. 但是加上后面的if之后,不但不会加载结果页面,连之前的searchAjax()方法也不 ...
最新文章
- 荣之联“云桥OneBridge”让IT运维事半功倍
- DayDayUp之Job:牛客网—算法工程师—剑指offer之66道在线编程(解决思路及其代码)——41~66
- 执行器接线图_风机盘管组装全过程,盘管与接管接线图,拿走不谢!
- 用Java语言编写的随机彩色验证码
- 第一个简单APP设计图
- GitHub资源学习的网址(未完待续)
- STM32 上位机 测试蓝牙电话功能功能(包括拨打电话/挂断电话/接听电话/Audio Transfer/获取通话电话号码/获取本地电话号码/激活语音识别/获取本地号码/获取运营商名字/3GPP指令)
- angular路由守卫
- 在无外网虚拟机CentOS7下安装金山wps-office最新版(超详细小白教程)
- 计算机信息安全培训计划,信息安全工作计划
- Visio 去掉页边距和空白页的方法
- 小知识·adb安装和使用方法
- 电子信息工程求职目标_实用的信息工程专业求职信四篇
- C++工资管理系统[2022-12-28]
- linux如何连接redis
- Python模块介绍使用:EasyOCR快速实现图片文字识别
- 天堂祭祀php,test_《扶摇柳真真免费阅读》
- Edge浏览器安装插件报错:显示出现错误 Download interrupted
- 服务器win2003远程桌面连接设置密码,解析WIN2003之远程桌面连接
- Elasticsearch集群类型和选举策略