VueJs中页面在进行网络请求时显示源码{{xxx}}标签问题

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/cpongo4/article/details/89333899

## 背景 日常开发中一般页面中很多数据都是通过异步方式来和后台进行网络交互获取对应业务数据然后通过Vuejs的{{变量名}}进行双向绑定展示数据 ## 问题 上述方式会导致由于网络请求慢的原因从而致使页面先展示源码标签内容给到用户,从而使人感到很不友好,如下图: ## 解决方案 * 采用Vue的官网给出的方案`v-cloak`标签,可以及便捷又完美可以解决该现象:该标签原理是通过结合CSS规则的样式来达到效果 * 我们来看官方给的解释说明([Vue官方Api](https://cn.vuejs.org/v2/api/#v-cloak)) > 这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。 * 下面我们通过代码来证实使用该标签的效果 > 1. html中通过定义style > ```css > > ``` > 2. 在`html`页面中vue实例中指定`el`元素上使用改标签`v-cloak` > ```html >

{{articles.title}}

{{types[articles.type]}} {{dateFormat(articles.publishTime,false)}} {{articles.publisher}} {{articles.commentNum}} 评论 {{articles.browseNum}} 阅读 {{articles.praiseNum}} 点赞

> ``` * 接下来我们来看看实测的效果,如下图: 通过`c-cloak`标签我们完美的解决了上述所产生的不友好问题,效果也挺好的。