flicker occurs when refreshing or loading the page. Use v-cloak to solve the problem. When the unread message is 0, the page will not flicker, but when the unread message is not 0, it will not be displayed. Is there any good way to solve the problem that the page does not flash when there is no unread message, and the unread message does not display normally when it is 0?
<div class="showIf" v-if="temp.unReadMessageNum != "" || temp.unReadMessageNum != 0" v-cloak>
<span class="num">{{temp.unReadMessageNum}}</span>
</div>.showIf {
display: inline-block;
float: right;
height: size(20);
width: size(20);
background-color: -sharpF64D32;
margin-right: size(5);
margin-top: size(13);
border-radius: 50%;
[v-cloak] {
display: none;
}
.num {
font-size: size(14);
line-height: size(16);
color: -sharpffffff;
text-align: center;
}
}