vue.js 渲染完成再显示 不要显示渲染过程。

Question

如下图，载入页面的过程：进入页面==》把自带的HTML元素显示出来(如图一）==》vue从API获取数据，从上到下依次填充数据，完成页面渲染（如图2）

我想要的效果：在没有全部渲染时，不显示任何元素，自带的html文字也不要显示，只显示载入中的动画；等全部渲染完成后，载入中动画消失，完整的页面出现。

 <div id="myTabContent" class="tab-content" style="">
                    <div class="tab-pane fade in active" id="jyjj">
                         <div v-if="dt.jiaoling!='新手上路'">
                             <h4><span class="glyphicon glyphicon-ok-sign" aria-hidden="true"></span>成功案例</h4>
                             <p>教龄：{{dt.jiaoling}}</p>
                             <p v-if="dt.jxcg">{{dt.jxcg}}</p>
                         </div>
                         <h4><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>个人简介</h4>
                         <p  v-if="dt.zs">{{dt.zs}}</p>
                         <p>{{dt.tc}}</p>
                         <h4><span class="glyphicon glyphicon-text-size" aria-hidden="true"></span>基本信息</h4>
                         <p>{{dt.sex}}，籍贯{{dt.jiguan}}</p>
                         <p>{{dt.xx}}，{{dt.zy}}，{{dt.xl}}</p>
                         <h4><span class="glyphicon glyphicon-random" aria-hidden="true"></span>教授科目</h4>
                         <p><span v-for="i in dt.km">{{i}}</span>（<a href="">可详谈</a>）</p>
                         <h4><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>授课地区</h4>
                         <p><span v-for="i in dt.skdq">{{i}}</span>（<a href="">可商议</a>）</p>
                    </div>

Answer 1

v-if 获取导数据以后设为true

Answer 2

html标签加上v-cloak，样式里面

[v-cloak] {
    display: none;
}

vue渲染完会把这个属性卸掉，然后显示出来就是完整的了。
文档的案例上有这个

Answer 3

推荐去了解一下element-ui的v-loading的实现和达到的效果，完全可以通过这种方式来避免这种情况的出现：http://element-cn.eleme.io/2....

Answer 4

v-text