vue指令之v-cloak
v-cloak指令的作用是vue实例渲染后关联结束;
双大括号插值语法在遇到网络延迟的时候会显示编译之前的文本。
1 <div id="app"> 2 {{a}} 3 </div> 4 <script src="./js/vue.js"></script> 5 <script> 6 var vue = new Vue({ 7 el: "#app", 8 data: { 9 a:'123456789' 10 } 11 }) 12 </script>
此时我们将网速调到最慢,此时我们可以看到
我们可以使用v-cloak结合CSS解决双大括号渲染的难题
1 <style> 2 //有v-cloak准则器的元素进行隐藏 3 [v-clock]{ 4 display: none; 5 } 6 </style>
1 <div id="app" v-clock> {{a}} </div>
[v-cloak]css选择器选择的是html结构中有v-cloak的属性,有这个属性的元素设置display为none,又由于v-cloak这个属性在vue的实例加载完之后关联结束,所以就需要了这个元素的隐藏状态,元素就会显示,这样造成的结果就是要么空白,要么显示编译后的文本。