使用v-cloak禁止显示渲染代码的元素

使用v-cloak禁止显示渲染代码的元素

        <!DOCTYPE html>
        <html>
            <head>
                <meta charset="utf-8">
                <title></title>
                <script src="js/vue.min.js"></script>
                <style>
                    //设置禁止显示渲染之前的元素，例如网络延迟会页面加载{{a}}
                    [v-cloak]{
                        display: none;
                    }
                    h1{
                        font-family: 宋体;
                        color: lightseagreen;
                        background-color: beige;

                    }
                </style>
            </head>
            <body>
                <div id="app" v-cloak>
                    <h1 >
                        {{a}}
                    </h1>
                    <button @click="add">操作指令</button>
                </div>
                <script>
                    new Vue({
                        el:'#app',
                        data:{
                            a:100
                        },
                        methods:{
                            add(){
                                this.a++;
                            }
                        },
                    })
                </script>
            </body>
        </html>
posted @ 2022-05-19 12:07  爱豆技术部  阅读(40)  评论(0)    收藏  举报