1. v-cloak
当网络较慢,网页还在加载 Vue.js ,而导致 Vue 来不及渲染,这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题
2. 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue延迟加载效果指令
</title>
<script src="./js/vue.js"></script>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<p>对比数据
</p>
<p v-cloak>{{msg}}
</p>
<p v-cloak v-text="msg">111111
</p>
</div>
</body>
<script>
setTimeout(function(){
new Vue({
el:"#app",
data:{
msg:"我是msg"
}
});
},5000);
</script>
</html>
3. 运行结果
初始化
5秒后
转载请注明原文地址: https://lol.8miu.com/read-1309.html