Vue的Mustache标签延迟出现{{user.name}},未加载出数据
<div id="my-profile" v-cloak>
<a :href="user.homepage" class="my-logo-container"><img :src="user.avatar" class="my-logo" /></a>
<div class="my-name-container">
<span class="my-name"><a :href="user.homepage">{{user.name}}</a></span>
<span id="age" :title="user.join">{{user.age}}</span>
</div>
<div id="follow-btn"></div>
<span class="my-desc">{{user.desc}}</span>
<div class="my-detaial">
<ul>
<li id="follow"><a :href='user.follow_link' :title="user.follow">{{user.follow}}</a></li>
<li id="fans"><a :href='user.fans_link' :title="user.fans">{{user.fans}}</a></li>
<li id="more">
<div class="my-stats">
<div class="btn-more"></div>
<ul class="dropwon-content">
<li id="post" :title="['随笔:'+user.post]">{{user.post}}</li>
<li id="article" :title="['文章:'+user.article]">{{user.article}}</li>
<li id="comment" :title="['评论:'+user.comment]">{{user.comment}}</li>
<li id="view" :title="['阅读:'+user.view_num]">{{user.view_text}}</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<script>
setTimeout(function(){
new Vue({
el:'#my-profile',
data:{
user:{
avatar:"https://pic.cnblogs.com/avatar/2587651/20220528233216.png",
homepage:$('#profile_block a').eq(0).attr('href'),
name:$('#profile_block a').eq(0).text(),
desc:$('#blogTitle h2').html(),
join:$('#profile_block a').eq(1).attr('title'),
age:$('#profile_block a').eq(1).text(),
fans_link:$('#profile_block a').eq(2).attr('href'),
fans:$('#profile_block a').eq(2).text(),
follow_link:$('#profile_block a').eq(3).attr('href'),
follow:$('#profile_block a').eq(3).text(),
post:$('#stats_post_count').text().replace(/[^0-9]/ig,""),
article:$('#stats_article_count').text().replace(/[^0-9]/ig,""),
comment:$('#stats-comment_count').text().replace(/[^0-9]/ig,""),
view_text:$('#stats-total-view-count span').text(),
view_num:$('#stats-total-view-count span').attr('title').replace(/[^0-9]/ig,"")
}
}
})
$('#follow-btn').append($('#p_b_follow'))
},1000)
</script>
给获取数据的vue对象家里一个延迟,然后在{{}}Mustache标签的标签
上加上v-cloak属性
这样写就实现了我们想要的效果:一开始没数据,v-cloak属性保留,显示{{message}},后面有数据了,显示你好,并删除了v-cloak属性。
最后,指定css效果:
<style>
[v-cloak] {
display: none;
}
</style>
有v-cloak属性的时候,把这个标签隐藏,至此我们想要的效果就做好了。