VUE还没生效，页面闪屏的问题解决办法 v-cloak

当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。

html：

<div id="app">{{context}}
</div>

js：

<script>var app = new Vue({el: '#app',data: {context:'互联网头部玩家钟爱的健身项目'}});
</script>

效果：

我们使用 v-cloak 指令来解决屏幕闪动的问题吧O(∩_∩)O~

js 不变，在 div 中加入 v-cloak 指令。

html：

<div id="app" v-cloak>{{context}}
</div>

css：

[v-cloak]{display: none;
}

使用 v-cloak 指令之后的效果（demo）：

在简单项目中，使用 v-cloak 指令是解决屏幕闪动的好方法。

作者：deniro
链接：https://www.jianshu.com/p/f56cde007210
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

VUE还没生效，页面闪屏的问题解决办法 v-cloak相关推荐

vue+element ui 设置页面全屏全屏和退出全屏的切换
vue+element ui 设置页面全屏全屏和退出全屏的切换方式1 screenfull 插件 // 属性 screenfull.isFullscreen; // 判断当前页是否全屏返回类型 ...
小米手机MIUI系统MIX4屏下光电指纹解锁时闪屏解决步骤办法
描述:小米手机MIUI系统MIX4屏下光电指纹解锁时闪屏解决步骤办法步骤: 设置->显示->开启防闪烁模式即可
layui日期与vue_详解Vue.js和layui日期控件冲突问题解决办法
详解Vue.js和layui日期控件冲突问题解决办法发布于 2020-8-10| 复制链接摘记: 事故还原: 今天在用layui的日期控件的时候发现一个问题,就是form表单中的日期选择之后,如果 ...
android 屏幕旋转不重新加载,Android webview旋转屏幕导致页面重新加载问题解决办法...
Android webview旋转屏幕导致页面重新加载问题解决办法 1. 在create时候加个状态判断 protected void onCreate(Bundle savedInstanceSta ...
ios 代码截屏模糊问题解决办法
ios 代码截屏模糊问题解决办法参考文章: (1)ios 代码截屏模糊问题解决办法 (2)https://www.cnblogs.com/gaoxiaoniu/p/5941284.html (3)h ...
Android欢迎页面闪屏解决方法
前段时间,在开发项目时发现打开欢迎页面会闪一下黑色,再显示欢迎页面.我的主题背景就是黑色的,估计是主题的问题. 下面做了个demo,是有闪屏的欢迎页面: 下面是WelcomeActivity的代码: ...
电脑显示器闪屏_Win7系统电脑显示器屏幕闪屏的解决办法
Win7系统电脑闪屏怎么办?近日一个用户反馈,在使用Win7系统电脑的时候,会出现闪屏的问题,该如何解决呢?请看下文具体解决办法. 解决办法: 1.首先右击桌面空白处,并在右键菜单中,直接选择&quo ...
UHD630核显驱动方法及驱动后闪屏严重问题解决记录
前言之前我同学在公司申请了一个台式,硬件是由自己挑选,公司购买.于是乎,我和他一起挑选了兼容性较好的黑苹果硬件,前天组装好.然后就在昨天开始安装黑苹果. 同学的电脑硬件配置如下,给大家参考参考: C ...
WINDOWS中Word闪屏处理成功办法
1.打开NVIDIA控制面板 2.3D设置中选择管理3D设置>程序设置>选择要自定义的程序--Microsoft Word(winword.exe)>为此程序选择首选图形处理器--集 ...

VUE还没生效，页面闪屏的问题解决办法 v-cloak

VUE还没生效，页面闪屏的问题解决办法 v-cloak相关推荐

最新文章

热门文章