鍍金池/ 問答/HTML/ vue.js 渲染完成再顯示 不要顯示渲染過程。

vue.js 渲染完成再顯示 不要顯示渲染過程。

如下圖，載入頁(yè)面的過程：進(jìn)入頁(yè)面==》把自帶的HTML元素顯示出來(如圖一）==》vue從API獲取數(shù)據(jù)，從上到下依次填充數(shù)據(jù)，完成頁(yè)面渲染（如圖2）

我想要的效果：在沒有全部渲染時(shí)，不顯示任何元素，自帶的html文字也不要顯示，只顯示載入中的動(dòng)畫；等全部渲染完成后，載入中動(dòng)畫消失，完整的頁(yè)面出現(xiàn)。

剛剛載入頁(yè)面

頁(yè)面逐漸載入完成

 <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>個(gè)人簡(jiǎn)介</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>授課地區(qū)</h4>
                         <p><span v-for="i in dt.skdq">{{i}}</span>（<a href="">可商議</a>）</p>
                    </div>
回答
編輯回答
陪她鬧

html標(biāo)簽加上v-cloak，樣式里面

[v-cloak] {
    display: none;
}

vue渲染完會(huì)把這個(gè)屬性卸掉，然后顯示出來就是完整的了。
文檔的案例上有這個(gè)

2017年2月13日 17:24
編輯回答
赱丅呿

v-if 獲取導(dǎo)數(shù)據(jù)以后設(shè)為true

2017年1月14日 13:42
編輯回答
故林

v-text

2017年11月2日 05:21
編輯回答
情皺

推薦去了解一下element-ui的v-loading的實(shí)現(xiàn)和達(dá)到的效果，完全可以通過這種方式來避免這種情況的出現(xiàn)：http://element-cn.eleme.io/2....

2017年7月12日 05:44