页面加载不显示双花括号

作者: 骚伦 | 来源:发表于2018-12-23 20:17 被阅读0次

直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue | v-model</title>
    <style>
        [v-cloak] {
           display: none;
        }
    </style>
</head>
<body>
    <div id="app"  v-cloak>
        <input type="text" v-model='name' placeholder="请输入您的名字">
        <h1>你好,{{ name }}</h1>
    </div>

    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                name:''
            }
        });
    </script>
</body>
</html>

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕