背景
当网络较慢,网页还在加载 Vue.js ,而导致 Vue 来不及渲染,这时页面就会显示出 Vue 源代码 , 具体是显示一些{{}}
。就可以使用 v-cloak 指令
+ v-cloak样式
来解决这一问题 (缺一不可)。
例如以下html,打开则会显示{{text}}
,一闪而过
<div id="app">
{{text}}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
text:'https://zhengkai.blog.csdn.net/'
}
});
</script>
解决方案
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue用v-cloak指令解决打开页面显示{{}}问题</title>
<meta name="author" content="zhengkai.blog.csdn.net">
</head>
<style>
[v-cloak] {
display: none;
}
</style>
<body>
<!-- add v-cloak for avoiding the {{code}} displayed when init-->
<div id="app" v-cloak>
{{text}}
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
text:'https://zhengkai.blog.csdn.net/'
}
});
</script>
</html>