v-cloak · Vue从入门到实战

## 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