(2) v-cloak指令

最新推荐文章于 2024-07-23 13:39:33 发布

liuyang___

最新推荐文章于 2024-07-23 13:39:33 发布

阅读量147

点赞数

分类专栏： vue学习笔记文章标签： vue.js

本文链接：https://blog.csdn.net/liuyang___/article/details/125120045

版权

vue学习笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="vue.min.js"></script>
</head>

<body>
    <div id="app">
        <div v-cloak>{{msg}}</div>
    </div>

<script>
    /*
    // v-cloak指令的用法
    // 1、提供样式
    [v-vlack] {
        display:none;
    }
    2、在插值表达式所在的标签中，添加v-cloak指令

    背后的原理：先通过样式隐藏内容，然后在内存种进行值得替换，替换好之后在显示最终的结果
    */



    var vm = new Vue({
        el:'#app',
        data:{
            msg:'hello vue'
        }
        })
</script>
</body>

</html>

插值表达式会存在“闪动”问题。

每次我们刷新浏览器的时候，插值表达式有时就会闪，所以我们为了解决这个问题，在标签中加入了v-cloak指令。