v-if和v-for連用出現的問題

zhangfaliang 發布于2019-08-26 13:29 / 1976人閱讀

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

解決方案有兩個可以根據具體情況而定

1.當控制v-if的元素不存在v-for中 , 可以使用template包裹住對應的v-for , 也可以使用父級元素添加v-if , 可以不加載從而優化性能

添加一個template

添加到父級


   {{item.value}}

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

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


問題的實質是因為在vue中會優先執行v-for, 當v-for把所有內容全部遍歷之后 , v-if再對已經遍歷的元素進行刪除 , 造成了加載的浪費 , 所以應該在執行v-for之前優先執行v-if , 可以減少加載的壓力

云服務器 GPU云服務器 cdn的出現問題云主機可能出現的問題阿里云服務器容易出現的問題 extjs出現問題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/108903.html

Vue 的條件渲染和列表渲染

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

go4it 2019-08-20 19:06 評論0 收藏0
Vue官方推薦的風格指南

摘要：官方推薦的風格指南個人筆記最近剛注意到官方多了一個風格指南的推薦。中始終用組件命名因為官方推薦風格命名，所以能用就用組件命名單詞應該是完整的單詞完整單詞帶易讀性的好處，和書寫麻煩的缺點。 Vue官方推薦的風格指南-個人筆記最近剛注意到vue官方多了一個vue風格指南的推薦。因為業務中一直用的vue，所以梳理學習一下，來增加自己代碼的規范性，效果不錯也可以安利到團隊。文檔沒有對JS...

null1145 2019-08-22 18:28 評論0 收藏0
前端面試--vue

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

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

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

Sanchi 2019-08-21 18:38 評論0 收藏0
如何利用vue進行條件渲染

摘要：在中配合條件渲染一整組因為是一個指令，需要將它添加到一個元素上。因此，如果需要非常頻繁地切換，則使用較好如果在運行時條件不太可能改變，則使用較好。 vue的條件渲染 v-if v-if指令可以插入和刪除所命令的模板 Yes data:{ ok:true } 輸出HTML Yes 當我們更改 ok 為 false時我們會發現頁面的 Yes 消失，在控制臺里面會發現 h1 標簽也已...

趙春朋 2019-08-20 19:05 評論0 收藏0