如何解決Vue中v-if和v-else-if頁面加載出現(xiàn)閃現(xiàn)的問題

這篇文章主要介紹了如何解決Vue中 v-if 和v-else-if頁面加載出現(xiàn)閃現(xiàn)的問題，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

尼勒克網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁設計、網(wǎng)站建設、微信開發(fā)、APP開發(fā)、成都響應式網(wǎng)站建設公司等網(wǎng)站項目制作，到程序開發(fā)，運營維護。創(chuàng)新互聯(lián)2013年開創(chuàng)至今到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進行。專注于網(wǎng)站建設就選創(chuàng)新互聯(lián)。

vue中v-if 和v-else-if在頁面加載的時候，不滿足條件的標簽會加載然后再消失掉，如果要解決這個問題，案例如下：

vue html代碼塊：

<div id="divApp">  
<div v-if="type === 'A'" v-cloak>    
A  
</div>  
<div v-else-if="type === 'B'" v-cloak>    
B  
</div>  
<div v-else-if="type === 'C'" v-cloak>    
C  
</div>  
<div v-else v-cloak>    
Not A/B/C  
</div>
</div>

vue js代碼塊：

var divApp = new Vue({  
el: '#divApp',  
data: 
{    
isActive: true,    
hasError: false,   
type: 'A'  },  
// 在 `methods` 對象中定義方法  
methods: {  
}
}
)

css 代碼：

[v-cloak] 
{ 
display:none;
}

下面看下vue學習中v-if和v-show一起使用的問題

v-if和v-show一起使用

在開發(fā)項目過程中v-if和v-show一起使用時，接下面跟著的v-else會在頁面上面顯示兩次 。代碼如下：

<tbody class="sortable" id="sortTable">
   <tr v-show="items.length" v-for="(item,index) in items" :item="item">
       <td :id="item.objectId">{{index+1}}</td>
       <td>{{item.number}}</td>
   </tr>
   <tr v-else>
       <td colspan='2'>暫無數(shù)據(jù)</td>
   </tr>
</tbody>

原因其實很簡單，根據(jù)vue的文檔描述：

當它們都處于同一節(jié)點時，v-for 的優(yōu)先級高于 v-if。這意味著，v-if 將分別在循環(huán)中的每次迭代上運行。

 也就是v-if會判斷兩次。

當然這樣用也有它的好處，當你只想將某些項渲染為節(jié)點時，這會非常有用，如下：(以上只渲染 todos 中未完成的項。)

<li v-for="todo in todos" v-if="!todo.isComplete">
 {{ todo }}
</li>

如果你的意圖與此相反，是根據(jù)條件跳過執(zhí)行循環(huán)，可以將 v-if 放置于包裹元素上

感謝你能夠認真閱讀完這篇文章，希望小編分享的“如何解決Vue中 v-if 和v-else-if頁面加載出現(xiàn)閃現(xiàn)的問題”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關知識等著你來學習!

分享名稱：如何解決Vue中v-if和v-else-if頁面加載出現(xiàn)閃現(xiàn)的問題
文章起源：http://bm7419.com/article16/jddggg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供虛擬主機、建站公司、App設計、標簽優(yōu)化、外貿(mào)網(wǎng)站建設、網(wǎng)站設計公司

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

成都做網(wǎng)站