vue插值表达式闪烁问题
当页面加载或是刷新的时候,会出现这样一种现象:{{插值表达式}}先出现在页面中,虽然只有一瞬间,但是会影响到用户的体验,尤其是在网络较慢是尤其明显。造成这种现象的原因是vue要在HTML dom加载之后再去执行js 代码。
解决办法如下:
- 在style标签中设置样式,将绑定了v-clock指令的元素隐藏,直到js代码执行
<style>
[v-clock] {
display:none;
}
</style>
<div v-clock>{{ message }}</div>