Vue基礎教程之條件渲染和列表渲染
前言
什麼是條件渲染?在我們的頁面中會有很多這樣的應用場景,比如說我們今天要上架一個活動,這個活動頁面隻在今天有效,在晚上的24點或者說在明天早上凌晨0點1秒的時候就要把這個頁面下下來,把這個圖片隱藏掉。如果我們安排一個運維兄弟手動去改HTML,那麼運維兄弟就會瘋掉的,其實這裡就會有一個很簡單的辦法,就是條件的渲染,即當0點的時候我們去判斷這個條件,如果這個條件達到瞭比如說24點或者是0點一個時間點,之後就把它隱藏起來,這個就是一個條件的渲染。
什麼是列表渲染呢?這個就是最常見的,比如說在頁面上有很多個元素,很多的圖片,像新聞網站一次加載20條,如果用手敲去寫HTML,那樣新聞網站的人就不用去幹活瞭,每天就去敲HTML代碼瞭,這裡面就會有類似於我們C語言代碼裡面的for循環那樣,有一個循環語句在這個地方,讓我們把這個頁面的元素構建出來生成出來,這就是列表渲染。1 v-if 和 v-show
1.1 作用
都用來控制元素的顯示和隱藏
1.2 控制元素顯隱的方式
v-if控制虛擬DOM樹上元素的創建和銷毀,Vue的響應系統會根據虛擬DOM樹對實際DOM進行更新,從而間接控制實際DOM上元素的顯隱
v-show通過給元素添加樣式display:none來讓元素隱藏
1.3 初始渲染對比
v-if是惰性的,如果初始渲染條件為false,什麼都不做;隻有條件為true,才會開始編譯
v-show不管初始渲染條件如何,元素始終被編譯並保留,之後根據條件通過CSS切換
1.4 切換消耗對比
如果頻繁切換顯示與隱藏,v-if會頻繁創建、銷毀元素,而v-show隻是切換樣式
故v-if的切換消耗更高
1.5 使用場景對比
如果元素的顯示隱藏在一開始就定下來不會再變瞭,使用v-if
如果元素需要頻繁切換顯隱,使用v-show
1.6 其他
- v-if可以搭配template使用,v-show不可以
- v-if可以搭配v-else,v-show無特殊語法
2 v-if 和 v-for
2.1 v-if 和 v-for 不能同時用的原因
為什麼不能把v-if和v-for同時用在同一個元素上?
當 Vue 處理指令的時候,v-for的優先級比v-if高,因此這個模板:
<ul> <li v-for="item in list" v-if="item.isActive" :key="item.id"> {{item.name}} </li> </ul>
會經過如下運算:
this.list.map(function(item) { if (item.isActive) { return item.name } })
我們每次重新渲染的時候都要遍歷整個列表,即使isActive為true的item很少,這會帶來性能方面的極大浪費,因此兩者不能同時用在同一個元素上
2.2 v-if 和 v-for 一起用的解決方案
1、如果想控制整個列表的顯隱,可以將v-if移動到容器元素上,比如:
<body> <div id="example"> <ul v-if="listShow"> <li v-for="item in activeItems" :key="item.id">{{item.name}}</li> </ul> </div> </body> <script> const vm = new Vue({ el: "#example", data: { list: [ { id: 1, name: "路飛", isActive: true }, { id: 2, name: "索隆", isActive: false }, { id: 3, name: "山治", isActive: true }, ], listShow: false, } }); </script>
2、如果想過濾列表中的項目,可以使用計算屬性(computed)返回過濾後的列表,比如:
<body> <div id="example"> <ul> <li v-for="item in activeItems" :key="item.id">{{item.name}}</li> </ul> </div> </body> <script> const vm = new Vue({ el: "#example", data: { list: [ { id: 1, name: "路飛", isActive: true }, { id: 2, name: "索隆", isActive: false }, { id: 3, name: "山治", isActive: true }, ], }, computed: { activeItems: function () { return this.list.filter((item) => item.isActive); }, }, }); </script>
3 列表渲染的 key 有什麼用
在使用v-for進行列表渲染時,必須給元素添加一個key屬性,並且這個key必須是唯一標識
<ul> <li v-for="item in list" :key="item.id">{{item.name}}</li> </ul>
我們知道,Vue 在更新元素時,不會直接操作真實DOM(渲染真實DOM開銷是很大的),而是根據新數據生成新的虛擬 DOM,然後對新舊虛擬DOM進行差異對比,根據對比結果進行DOM操作來更新視圖
列表渲染時,如果有key屬性,由於它是唯一標識,在對比兩個新舊節點時若key不同也就沒有深入對比的必要瞭。
為什麼不能用index作為key?因為index是不穩定可變的,比如刪除瞭列表第一個元素,會導致後面的元素index發生變化,從而導致key發生變化。這時,Vue 在對比新舊節點時,遇到key相同的節點,就會進行深入對比,發現節點內容發生瞭變化,就會去創建新的真實DOM用來替換原來的真實DOM。原本隻需要刪除真實DOM中第一個元素的操作,會變成新建、替換後續所有真實DOM,造成性能的極大浪費
總結
到此這篇關於Vue基礎教程之條件渲染和列表渲染的文章就介紹到這瞭,更多相關Vue條件渲染和列表渲染內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- Vue中使用 class 類樣式的方法詳情
- 解讀Vue實例的屬性及模板渲染
- HTML頁面中使用Vue實例進階(快速學會上手Vue)
- vue如何通過日期篩選數據
- vue3中的透傳attributes教程示例詳解