## v-cloak指令 **用法:**这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕,否则在渲染页面时,有可能用户会先看到Mustache标签,然后看到编译后的数据。 >[info]代码示例 ~~~ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> [v-cloak] { display: none; } </style> <script src="vue.js" ></script> </head> <body> <div id="demo"> <span>{{message}}</span> <span v-cloak>{{message}}</span> </div> <script type="text/javascript"> var app=new Vue({ el:'#demo', data:{ message:'hello vue' } }); </script> </body> </html> ~~~ >[success]预览:https://ityanxi.github.io/Vue-tutorial/chapter04/12v-cloak.html