在vue的项目开发中,偶尔会遇到网络比较慢等情况,运行vue项目会出现类似{{msg}}这种形式的问题
如果不是插值出现的问题,在一段时间之后页面还是会正常显示插值的正确内容,就像闪烁的感觉一样,解决这种问题用如下办法:
在插值的元素上面添加v-cloak属性,在style样式中对此属性进行display:none操作,可以防止闪烁的发生。
<div class="reply" v-for="item in msgData" v-cloak>
<p class="replyContent">{{item.content}}</p>
<p class="operation">
<span class="replyTime">{{item.time}}</span>
<span class="handle">
<a href="javascript:;" class="top">{{item.acc}}</a>
<a href="javascript:;" class="down_icon">{{item.ref}}</a>
<a href="javascript:;" class="cut">删除</a>
</span>
</p>
</div>
<style>
[v-cloak]{
display: none;
}
</style>