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属性的时候，把这个标签隐藏，至此我们想要的效果就做好了。