美文网首页
v-cloak 遮盖

v-cloak 遮盖

作者: 两点半的杂货铺 | 来源:发表于2019-02-17 11:41 被阅读3次

    v--cloak 遮盖

    1.这个指令保持在元素上直到关联实例结束编译
    2.因为指令生命周期的特殊性,常备用来解决大胡子语法闪烁问题

    解决大胡子语法闪烁案例

    1.一般把v--cloak 绑在Vue实例el属性绑定的节点上
    2.在css样式中加上:
    [v-cloak] {
    display: none;
    }

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--导入Vue cdn 的网址-->
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
        <style>
            [v-cloak] {
                display: none;
            }
        </style>
    </head>
    <body>
        <div id="app" v-cloak>
            {{msg}}
        </div>
        <script>
            var vm = new Vue({
                el:"#app",
                data:{
                    msg:"网速过慢加载时候解决大胡子语法闪烁问题"
                }
            })
        </script>
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:v-cloak 遮盖

          本文链接:https://www.haomeiwen.com/subject/rchgeqtx.html