Vue中 v-if 和v-else-if頁面加載出現閃現的問題及解決方法
更新時間：2018年10月12日 11:48:57 作者：King哥2
vue中v-if 和v-else-if在頁面加載的時候，不滿足條件的標簽會加載然后再消失掉，如果要解決這個問題，下面小編給大家?guī)砹藢嵗a，需要的朋友參考下吧
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'>暫無數據</td>
</tr>
</tbody>
原因其實很簡單，根據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>
如果你的意圖與此相反，是根據條件跳過執(zhí)行循環(huán)，可以將 v-if 放置于包裹元素上（或放置于
總結
以上所述是小編給大家介紹的Vue中 v-if 和v-else-if頁面加載出現閃現的問題及解決方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
這篇文章主要為大家詳細介紹了vue上傳圖片組件的編寫代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要介紹了Vue.js實現的表格增加刪除demo,結合實例形式分析了vue.js數據綁定及元素增加、刪除等相關操作技巧,需要的朋友可以參考下2018-05-05
本篇文章主要介紹了Vuex之理解Mutations的用法實例，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
今天小編就為大家分享一篇Vue修改項目啟動端口號方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了Vue2中無法監(jiān)聽數組和對象的某些變化問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
本片文章是小編在網上整理的關于VUEX進階的相關知識點內容，對此有興趣的朋友可以跟著學習參考下。2018-05-05
這篇文章主要介紹了Vue2.0父子組件傳遞函數的教程詳解,需要的朋友可以參考下2017-10-10
Jenkins?Sidebar?Link插件實現添加側邊欄功能詳解
這篇文章主要介紹了vue框架實現添加側邊欄，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了vue實現監(jiān)聽localstorage值變化，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了VUE和Antv G6實現在線拓撲圖編輯操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10