v-if和v-for連用出現(xiàn)的問題

zhangfaliang 發(fā)布于2019-08-26 13:29 / 1973人閱讀

摘要：解決方案有兩個(gè)可以根據(jù)具體情況而定當(dāng)控制的元素不存在中可以使用包裹住對(duì)應(yīng)的也可以使用父級(jí)元素添加可以不加載從而優(yōu)化性能添加一個(gè)添加到父級(jí)如果控制的元素存在中可以通過使用計(jì)算器屬性來回避比如使用計(jì)算器屬性在頁面加載之前進(jìn)行

解決方案有兩個(gè)可以根據(jù)具體情況而定

1.當(dāng)控制v-if的元素不存在v-for中 , 可以使用template包裹住對(duì)應(yīng)的v-for , 也可以使用父級(jí)元素添加v-if , 可以不加載從而優(yōu)化性能

添加一個(gè)template

添加到父級(jí)


   {{item.value}}

2.如果v-if 控制的元素存在v-for中 , 可以通過使用計(jì)算器屬性來回避 , 比如使用計(jì)算器屬性在頁面加載之前進(jìn)行一邊過濾

computed: {
    loadList() {
       const { list } = this
       return list.filter(item => item.value)
    }
}


問題的實(shí)質(zhì)是因?yàn)樵趘ue中會(huì)優(yōu)先執(zhí)行v-for, 當(dāng)v-for把所有內(nèi)容全部遍歷之后 , v-if再對(duì)已經(jīng)遍歷的元素進(jìn)行刪除 , 造成了加載的浪費(fèi) , 所以應(yīng)該在執(zhí)行v-for之前優(yōu)先執(zhí)行v-if , 可以減少加載的壓力

云服務(wù)器 GPU云服務(wù)器 cdn的出現(xiàn)問題云主機(jī)可能出現(xiàn)的問題阿里云服務(wù)器容易出現(xiàn)的問題 extjs出現(xiàn)問題

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/108903.html

相關(guān)文章

Vue 的條件渲染和列表渲染

摘要：條件渲染上一篇與綁定下一篇的事件處理方法在中配合渲染一整組在使用控制元素的時(shí)候，我們需要將它添加到這個(gè)元素上去。最終的渲染結(jié)果不會(huì)包含元素。渲染如下列表渲染使用把一個(gè)數(shù)組對(duì)應(yīng)為一組元素我們用指令根據(jù)一組數(shù)組的選項(xiàng)列表進(jìn)行渲染。條件渲染上一篇：Class 與 Style 綁定：https://segmentfault.com/a/11...下一篇：Vue的事件處理方法：https:/...

go4it 2019-08-20 19:06 評(píng)論0 收藏0
Vue官方推薦的風(fēng)格指南

摘要：官方推薦的風(fēng)格指南個(gè)人筆記最近剛注意到官方多了一個(gè)風(fēng)格指南的推薦。中始終用組件命名因?yàn)楣俜酵扑]風(fēng)格命名，所以能用就用組件命名單詞應(yīng)該是完整的單詞完整單詞帶易讀性的好處，和書寫麻煩的缺點(diǎn)。 Vue官方推薦的風(fēng)格指南-個(gè)人筆記最近剛注意到vue官方多了一個(gè)vue風(fēng)格指南的推薦。因?yàn)闃I(yè)務(wù)中一直用的vue，所以梳理學(xué)習(xí)一下，來增加自己代碼的規(guī)范性，效果不錯(cuò)也可以安利到團(tuán)隊(duì)。文檔沒有對(duì)JS...

null1145 2019-08-22 18:28 評(píng)論0 收藏0
前端面試--vue

摘要：注意重點(diǎn)是獲取更新后的就是在開發(fā)過程中有個(gè)需求是需要在階段操作數(shù)據(jù)更新后的節(jié)點(diǎn)這時(shí)候就需要用到就是用來知道什么時(shí)候更新完成原因在鉤子函數(shù)執(zhí)行的時(shí)候其實(shí)并未進(jìn)行任何渲染，而此時(shí)進(jìn)行操作無異于徒勞，所以在中一定要將操作的代碼放進(jìn)的回調(diào)函數(shù)中。 1. 最簡(jiǎn)單的vue el: dom節(jié)點(diǎn) data: 數(shù)據(jù) Vue 測(cè)試實(shí)例 - 菜鳥教程(runoob.com) ...

coordinate35 2019-08-26 13:45 評(píng)論0 收藏0
Vue.js Guide Essentials-說人話-速記版

摘要：以下內(nèi)容根據(jù)部分速記。同時(shí)，需要在父組件標(biāo)簽中添加這個(gè)屬性，該屬性才能傳遞到子組件內(nèi)。把父組件傳遞的數(shù)據(jù)當(dāng)做子組件的初始值。以下內(nèi)容根據(jù)Vue.js Guide Essentials部分速記。不含動(dòng)畫/mixin/SSR/路由/狀態(tài)管理等部分. Introduction 建議閱讀原文 https://vuejs.org/v2/guide/in... 什么是Vue 開始聲明式...

Sanchi 2019-08-21 18:38 評(píng)論0 收藏0
如何利用vue進(jìn)行條件渲染

摘要：在中配合條件渲染一整組因?yàn)槭且粋€(gè)指令，需要將它添加到一個(gè)元素上。因此，如果需要非常頻繁地切換，則使用較好如果在運(yùn)行時(shí)條件不太可能改變，則使用較好。 vue的條件渲染 v-if v-if指令可以插入和刪除所命令的模板 Yes data:{ ok:true } 輸出HTML Yes 當(dāng)我們更改 ok 為 false時(shí)我們會(huì)發(fā)現(xiàn)頁面的 Yes 消失，在控制臺(tái)里面會(huì)發(fā)現(xiàn) h1 標(biāo)簽也已...

趙春朋 2019-08-20 19:05 評(píng)論0 收藏0