5.Vue延迟加载效果指令

it2023-01-25  59

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秒后
最新回复(0)