Vue中 v-if 和v-else-if頁面加載出現(xiàn)閃現(xiàn)的問題及解決方法
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>
原因其實(shí)很簡單,根據(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)文章
Vue.js實(shí)現(xiàn)的表格增加刪除demo示例
這篇文章主要介紹了Vue.js實(shí)現(xiàn)的表格增加刪除demo,結(jié)合實(shí)例形式分析了vue.js數(shù)據(jù)綁定及元素增加、刪除等相關(guān)操作技巧,需要的朋友可以參考下2018-05-05Vue2中無法監(jiān)聽數(shù)組和對象的某些變化問題
這篇文章主要介紹了Vue2中無法監(jiān)聽數(shù)組和對象的某些變化問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08Jenkins?Sidebar?Link插件實(shí)現(xiàn)添加側(cè)邊欄功能詳解
這篇文章主要介紹了vue框架實(shí)現(xiàn)添加側(cè)邊欄,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-12-12vue實(shí)現(xiàn)監(jiān)聽localstorage值變化
這篇文章主要介紹了vue實(shí)現(xiàn)監(jiān)聽localstorage值變化,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08VUE和Antv G6實(shí)現(xiàn)在線拓?fù)鋱D編輯操作
這篇文章主要介紹了VUE和Antv G6實(shí)現(xiàn)在線拓?fù)鋱D編輯操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10