一、v-for 基本使用

<!--v-for 指令1. 用于展示列表數據2. 語法：v-for="(item, index) in xxx" :key="yyy"3. 可遍歷：數組、對象、字符串（用得少）、指定次數（用得少） --> <div id="root"><ul><!-- 遍歷數組 --><li v-for="(item, index) in persons" :key="index">{{index}} --{{item.name}} --{{item.age}} --{{item.sex}}</li></ul><ul><!-- 遍歷對象 --><li v-for="(item, index) in personObject" :key="index">{{item.name}} --{{item.age}} --{{item.sex}}</li></ul><ul><!-- 遍歷字符串 --><li v-for="(item, index) in str" :key="index">{{index}} -- {{item}}</li></ul><ul><!-- 遍歷數字 --><li v-for="(item, index) in 5" :key="index">{{index}} -- {{item}}</li></ul> </div>

二、v-for 中的 key 的原理

<!--面試題：react、vue 中的 key 有什么作用？（ key 的內部原理)1. 虛擬 DOM 中 key 的作用：key 是虛擬 DOM 對象的標識，當數據發生變化時，Vue 會根據【新數據】生成【新的虛擬 DOM 】隨后 Vue 進行【新虛擬 DOM 】與 【舊虛擬 DOM 】的差異比較，比較規則如下：2. 比較規則：(1). 舊虛擬 DOM 中找到了與新虛擬 DOM 相同的 key:①. 若虛擬 DOM 中內容沒變，直接使用之前的真實 DOM②. 若虛擬 DOM 中內容變了，則生成新的真實 DOM, 隨后替換掉頁面中之前的真實 DOM(2). 舊虛擬 DOM 中找到與新虛擬 DOM 相同的 key:創建新的真實 DOM , 隨后渲染到頁面3. 用 index 作為 key 可能會引發的問題：1. 若對數據進行：逆序添加、逆序刪除等破壞順序操作：會產生沒有必要的真實 DOM 更新 ==> 界面效果沒問題，但效率低2. 如果結構中還包含輸入類的 DOM :會產生錯誤 DOM 更新 ==> 界面有問題4. 開發中如何選擇 key ? :1. 最好使用每條數據的唯一標識作為 key , 比如 id、手機號、身份證號、學號等唯一值2. 如果不存在對數據的逆序添加、逆序刪除等破壞結構順序操作，僅用于渲染列表用于展示使用 index 作為 key 是沒有問題的--> <div id="root"><ul><!-- 遍歷數組 --><li v-for="(item, index) in persons" :key="item.id">{{item.id}} --{{item.name}} --{{item.age}} --{{item.sex}}<input type="text" name="" id=""></li></ul><p><button @click="add">按鈕</button></p> </div>

總結

以上是生活随笔為你收集整理的vue 列表渲染 v-for的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。