vue指令（1）v-cloak

理论知识

v-cloak指令(cloak披风、斗篷)
- 由于vue在解析插值表达式时，首先将插值表达式输出在浏览器，其后将插值表达式中的变量替换为具体值，用户可以看到这一过程，即存在闪动问题。
- 原理先通过样式隐藏内容，然后在内容中给插值表达式的变量赋值，最后显示在浏览器中。用户看不到变量替换的过程，进而解决了闪动问题。

实践

该指令用在style标签内部。

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="vue.js"></script>
    <style type="text/css">
        [v-cloak]{  
            background: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <div v-cloak> {{ msg }}</div>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data:{
                msg:'hello world'
            }
        })
    </script>
</body>
</html>

来源：https://www.cnblogs.com/guojuboke/p/12299460.html

标签

vue

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!