v-cloak的使用场景
v-cloak指令常常用在插值表达式的标签中,因为它可以解决当网络加载很慢时,或者频繁渲染时候,页面就会显示出源代码的情况。
v-cloak的使用
首先,在差值语法所在的标签处加上v-cloak指令
<h3 v-cloak>{{name}}</h3>
然后,在css中设置v-cloak的属性为display为none
1.<style type="text/css">
2. [v-cloak]{
3. display: none;
4. }
5. </style>
v-cloak的原理
v-cloak原理是先通过样式隐藏内容,然后在内存中进行值的替换,将替换的内容再反馈给界面,数据渲染完场之后,v-cloak 属性会被自动去除。