5.Vue延迟加载效果指令

最新推荐文章于 2024-11-19 14:45:11 发布

西瓜咬人啦

最新推荐文章于 2024-11-19 14:45:11 发布

阅读量992

点赞数

分类专栏： Vue 文章标签： vue js javascript html

@TMQ

本文链接：https://blog.youkuaiyun.com/weixin_42076050/article/details/109177453

版权

Vue 专栏收录该内容

12 篇文章

订阅专栏

本文介绍Vue.js中v-cloak指令的作用及其使用方法。通过实例展示如何利用v-cloak解决在网络加载缓慢时页面显示Vue源代码的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>