Vue--防止页面闪烁

vue会把{{ xxx }} 编译成我们指定的数据，但是在编译的那一刹那间， {{ xxx }} 还是会显示出来的。
 
方案1 （ 使用v-html替代 {{ }} ）
<div id='app'>
　　<span v-html='msg'></span>
</div>
<script src='js/vue.js'></script>
<script>
　　var vm = new Vue({
　　　　el : '#app',
　　　　data : {
　　　　　　msg : 'hello vue'
　　　　}
});
</script>
 
方案2 （ 使用v-text替代 {{ }} ）
<div id='app'>
　　<span v-text='msg'></span>
</div>
<script src='js/vue.js'></script>
<script>
　　var vm = new Vue({
　　　　el : '#app',
　　　　data : {
　　　　　　msg : 'hello vue'
　　　　}　　　　
});
</script>
 
方案3 （使用v-cloak）
<!doctype html>
<html lang="en">
<head>
　　<meta charset="UTF-8">
　　<title>v-cloak</title>
　　<style>[v-cloak]{display: none;}</style>
</head>
<body>
　　<div id='app' v-cloak>
　　　　{{msg}}
　　</div>
<script src='js/vue.js'></script>
<script>
　　var vm = new Vue({
　　　　el : '#app',
　　　　data : {
　　　　msg : 'hello vue'
　　}
});
</script>
</body>
</html>
v-cloak写在最外层的div即可。这样里面的{{xxx}}还没被编译完成的时候就不会被显示出来。推荐使用这种方法解决闪烁问题
 
 

posted @ 2020-11-28 11:02  盲仔不瞎忙  阅读(307)  评论(0)  编辑  收藏  举报