一、前言
写项目的会经常使用到v-if进行判断，但是因为加载或编译原因会导致页面最初加载的时候出现闪烁问题；
二、解决办法
使用v-cloak，我的理解是：只有编译没完成时才有，用了css将它隐藏，这样编译成功后才显示，所以解决了闪烁问题；大佬给出的解答是：v-cloak指令和css规则如[v-cloak]{display:none}一起用时，这个指令可以隐藏未编译的Mustache标签直到实例准备完毕。v-cloak 指令可以像css选择器一样绑定一套css样式然后这套css会一直生效到实例编译结束。
用法如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
[v-cloak] {
display: none;
}
</style>
<script src="vue.js" ></script>
</head>
<body>
<div id="demo">
<span>{{message}}</span>
<span v-cloak>{{message}}</span>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#demo',
data:{
message:'hello vue'
}
});
</script>
</body>
</html>
三、总结
1.vue官方文档是这么说的，v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
2.原因可能是：vue是通过编译替换的，可能在显示时编译还未完成，所以有闪烁。
3.在简单项目中，使用 v-cloak 指令是解决屏幕闪动的好方法。但在大型、工程化的项目中（webpack、vue-router）只有一个空的 div 元素，元素中的内容是通过路由挂载来实现的，这时我们就不需要用到 v-cloak 指令了。
1992
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
