解决vue变量未渲染前代码显示问题

时间:2023-03-10 07:24:12
解决vue变量未渲染前代码显示问题

在网络加载缓慢或者刷新的时候总会有那么一瞬间出现vue的模板代码,实在很影响美观,对于我这种有强迫症的人来说实在是忍无可忍,后来经过查找资料,终于发现了解决方法,可以使用vue现成的指令来解决这个问题:v-cloak

首先在css中加入:

 [v-cloak]{
 display: none;
}

然后需要在元素加上:

 <div v-cloak>
{{demo}}
</div>

这样,v-cloak所在元素下的变量在未渲染前是不会显示的。