Vue中 v-if 和v-else-if頁面加載出現(xiàn)閃現(xiàn)的問題及解決方法
更新時間：2018年10月12日 11:48:57 作者：King哥2
vue中v-if 和v-else-if在頁面加載的時候，不滿足條件的標(biāo)簽會加載然后再消失掉，如果要解決這個問題，下面小編給大家?guī)砹藢嵗a，需要的朋友參考下吧
vue中v-if 和v-else-if在頁面加載的時候，不滿足條件的標(biāo)簽會加載然后再消失掉，如果要解決這個問題，案例如下：
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學(xué)習(xí)中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的文檔描述：
當(dāng)它們都處于同一節(jié)點(diǎn)時，v-for 的優(yōu)先級高于 v-if。這意味著，v-if 將分別在循環(huán)中的每次迭代上運(yùn)行。
也就是v-if會判斷兩次。
當(dāng)然這樣用也有它的好處，當(dāng)你只想將某些項渲染為節(jié)點(diǎn)時，這會非常有用，如下：(以上只渲染 todos 中未完成的項。)
<li v-for="todo in todos" v-if="!todo.isComplete">
{{ todo }}
</li>
如果你的意圖與此相反，是根據(jù)條件跳過執(zhí)行循環(huán)，可以將 v-if 放置于包裹元素上（或放置于
總結(jié)
以上所述是小編給大家介紹的Vue中 v-if 和v-else-if頁面加載出現(xiàn)閃現(xiàn)的問題及解決方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
本文旨在記錄解決在工作中一鍵復(fù)制功能得需求,本文主要使用了Vue3+TypeScript+Ant-Design-Vue,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-11-11
這篇文章主要介紹了Vue與React的區(qū)別和優(yōu)勢對比，幫助大家更好的選擇適合自己的前端框架，迷茫的同學(xué)可以進(jìn)來參考下2020-12-12
vue form表單post請求結(jié)合Servlet實現(xiàn)文件上傳功能
這篇文章主要介紹了vue form表單post請求結(jié)合Servlet實現(xiàn)文件上傳功能，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2021-01-01
vue中watch和computed的區(qū)別與使用方法
這篇文章主要給大家介紹了關(guān)于vue中watch和computed的區(qū)別與使用方法的相關(guān)資料，文中通過實例代碼結(jié)束的非常詳細(xì)，對大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
這篇文章主要介紹了form?表單驗證是異步問題記錄,通過實例代碼介紹了Promise.all 和 Promise.allSettled 區(qū)別，需要的朋友可以參考下2023-01-01
今天小編就為大家分享一篇在Vue中獲取組件聲明時的name屬性方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
在平時vue開發(fā)中,我們經(jīng)常會用到計算屬性(計算屬性只有在它的相關(guān)依賴發(fā)生改變時才會重新求值)來計算我們需要的數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于vue中動態(tài)參數(shù)與計算屬性使用的相關(guān)資料,需要的朋友可以參考下2021-08-08
webpack安裝配置與常見使用過程詳解（結(jié)合vue）
這篇文章主要介紹了webpack安裝配置與常見使用過程，主要結(jié)合vue實現(xiàn)，通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-06
這篇文章主要介紹了使用vue的transition完成滑動過渡的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
vue上傳文件formData入?yún)榭?接口請求500的解決
這篇文章主要介紹了vue上傳文件formData入?yún)榭?接口請求500的解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06