vue的v-for循環渲染列表時,解決沒有:key警告問題(:key的作用)


:key是為vue的響應式渲染提供方法,在列表中單條數據改變的情況下,可以進行單獨渲染,減少頁面資源消耗。

  當前頁面如果有列表渲染v-for,並且在v-for的循環標簽中沒有:key元素時,控制台會出現警告,我想對代碼有比較高追求的開發者都不會允許這一大片的黃色出現的吧,如下圖

 

  在項目運行的時候也不會有問題發生,不過這惡心的警告讓我感到無法忍受,故而研究一下:key的使用方式。

 <div v-for="(items key index) in list" :key="key"></div>

  大家可以發現,其實:key的中可以填寫的選擇很多,但是很多人又不知道到底是填寫哪一個值會比較好,所以本人研究過后,發現,如果使用v-for循環中的key鍵值或者index索引值,得到的結果都是無法實現單條數據渲染,只有使用items中的自身屬性才可以達到單條數據各自渲染的結果,所以,一般會使用:key="items.id"等items中的屬性。

  一般來說,使用:key="items.id"的屬性有利於代碼的優化,減少頁面資源消耗


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM