解决Vue.js由于延时显示了{{message}}引用界面的问题


Posted in Javascript onAugust 25, 2018

在使用Vue写应用时发现一个问题,每当进入一些有延时的(如网络API请求)操作时,会先闪一下未编译的 Mustache 标签{{ message }},这让人很不爽。

在官网找到了解决方案:v-cloak

参照官网做法:

定义[v-cloak]的style

<style>
 [v-cloak] {
  display: none;
 }
</style>

使用了Mustache标签的地方加上v-cloak

<div v-cloak>{{ message }}</div>

这样,Vue就可以隐藏未编译的 Mustache 标签直到实例准备完毕。实测效果很棒。

以上这篇解决Vue.js由于延时显示了{{message}}引用界面的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 读取元素的CSS信息的代码
Feb 07 Javascript
JS操作Cookies的小例子
Oct 15 Javascript
JS正则表达式获取分组内容的方法详解
Nov 15 Javascript
jquery中ajax使用error调试错误的方法
Feb 08 Javascript
Jquery获取第一个子元素简单实例
Jun 02 Javascript
详解vue.js2.0父组件点击触发子组件方法
May 10 Javascript
JS与HTML结合实现流程进度展示条思路详解
Sep 03 Javascript
深入浅出webpack之externals的使用
Dec 04 Javascript
vue弹出框组件封装实例代码
Oct 31 Javascript
微信小程序 bindtap 传参的实例代码
Feb 21 Javascript
js实现九宫格布局效果
May 28 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
Aug 14 Javascript
vue中各选项及钩子函数执行顺序详解
Aug 25 #Javascript
vue实现在一个方法执行完后执行另一个方法的示例
Aug 25 #Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
Aug 25 #Javascript
对Vue beforeRouteEnter 的next执行时机详解
Aug 25 #Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
Aug 25 #Javascript
Vue中div contenteditable 的光标定位方法
Aug 25 #Javascript
Vue中mintui的field实现blur和focus事件的方法
Aug 25 #Javascript
You might like
PHP实现MVC开发得最简单的方法――模型
2007/04/10 PHP
用PHP实现 上一篇、下一篇的代码
2012/09/29 PHP
PHP 5.3和PHP 5.4出现FastCGI Error解决方法
2015/02/12 PHP
屏蔽PHP默认设置中的Notice警告的方法
2016/05/20 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
php关联数组与索引数组及其显示方法
2018/03/12 PHP
JQuery困惑—包装集 DOM节点
2009/10/16 Javascript
js 面向对象的技术创建高级 Web 应用程序
2010/02/25 Javascript
javascript拖拽上传类库DropzoneJS使用方法
2013/12/05 Javascript
jQuery通过Ajax返回JSON数据
2015/04/28 Javascript
详解vue-cli中配置sass
2017/06/21 Javascript
jquery实现倒计时小应用
2017/09/19 jQuery
基于vue实现网站前台的权限管理(前后端分离实践)
2018/01/13 Javascript
微信小程序scroll-view仿拼多多横向滑动滚动条
2020/04/21 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
2018/08/24 Javascript
对vue v-if v-else-if v-else 的简单使用详解
2018/09/29 Javascript
详解ES6系列之私有变量的实现
2018/11/21 Javascript
jqGrid表格底部汇总、合计行footerrow处理
2019/08/21 Javascript
vuex实现像调用模板方法一样调用Mutations方法
2019/11/06 Javascript
[31:47]夜魇凡尔赛茶话会 第三期01:选手知多少
2021/03/11 DOTA
Python3学习urllib的使用方法示例
2017/11/29 Python
Django 查询数据库并返回页面的例子
2019/08/12 Python
浅谈Python3识别判断图片主要颜色并和颜色库进行对比的方法
2019/10/25 Python
Python 模拟生成动态产生验证码图片的方法
2020/02/01 Python
pytorch模型存储的2种实现方法
2020/02/14 Python
Lombok插件安装(IDEA)及配置jar包使用详解
2020/11/04 Python
First Aid Beauty官网:FAB急救面霜
2018/05/24 全球购物
怎样声明子类
2013/07/02 面试题
上课迟到检讨书
2014/01/19 职场文书
自我鉴定标准格式
2014/03/19 职场文书
共筑中国梦演讲稿
2014/04/23 职场文书
司机工作自我鉴定
2014/09/19 职场文书
2014收银员工作总结范文
2014/12/16 职场文书
英文版辞职信
2015/02/28 职场文书
使用CSS实现小三角边框原理解析
2021/11/07 HTML / CSS
详解TypeScript的基础类型
2022/02/18 Javascript