文件：
當 vue.js 用意思就是，預設就是按照索引來「就地復用」html元素的，如以下**v-for正在更新已渲染過的元素列表時，它預設用「就地復用」策略。如果資料項的順序被改變，vue 將不會移動 dom 元素來匹配資料項的順序， 而是簡單復用此處每個元素，並且確保它在特定索引下顯示已被渲染過的每個元素。這個類似 vue 1.x 的track-by="$index"
<等價於div
v-for
="(item,index) in arr"
:key
="index"
>
<對於「就地復用」這個現象，以下來重現一下：div
v-for
="(item,index) in arr"
>
測試**
<往頁面的輸入框依次填入1~3：template
>
<
div>
<
div
v-for
="(item,index) in arr"
>
<
input
type
="text"
>
<
button
@click
="del(index)"
>刪除
button
>
div>
<
button
@click
="add"
>新增
button
>
div>
template
>
<
script
>
export
default
},methods: ,
add() }}
script
>
然後點選第二個刪除按鈕，效果如下：
頁面剩下1、2，這跟我們預期的剩下1、3不一樣，原因就在於vue預設的「就地復用」原則。現象解釋如下：
將以上三個輸入框記為a，b，c。for迴圈預設的key為索引的話，則a對應0，b對應1，c對應2 。那當刪了了第二個元素時，新陣列的元素的索引分別為0和1，而重新渲染時，採用就地復用的話，復用到的dom元素就是a和b了，頁面輸入框就展示1和2了。這輸入框中的1和2實際上就是代表了dom的狀態，通過輸入框的值，就能看出來，vue復用了哪個dom元素。這裡說的，實際上就是對應了文件的第二段話：
這個預設的模式是高效的，但是只適用於不依賴子元件狀態或臨時 dom 狀態 (例如：表單輸入值) 的列表渲染輸出也就是說，當dom有狀態的時候，最好就不要採用這種預設模式（key為索引），否則會導致狀態混亂（如上面我們明明點選了第二個刪除，而頁面展示的效果卻像點選了第三個刪除的按鈕一樣）。
對於迴圈渲染有狀態的dom元素，應該讓key與陣列元素一一對應起來，這樣陣列元素的刪除，就完全等同於對應dom元素的刪除了（換個角度解釋以上的問題就是：點選刪除的前後，索引1對應著相同的dom元素，而對應的陣列元素卻不一致，導致頁面展示的結果讓人困惑），解決辦法如下：
<讓key與陣列元素唯一對應起來即可，執行效果：點選第二個刪除，介面上剩餘1,3，符合我們預期結果。但是這樣一來，vue就不會就地復用，效能會相對低一點了。div
v-for
="(item,index) in arr"
:key
="item"
>
<
input
type
="text"
>
<
button
@click
="del(index)"
>刪除
button
>
div>
vue之列表渲染
一 v for迴圈用於陣列 v for指令根據一組陣列的選項列表進行渲染。1 v for指令需要使用item in items形式的特殊語法，items是源資料陣列名，item是陣列元素迭代的別名 為當前遍歷的元素提供別名，可以任意起名 ul id example li v for item in ...
CSS學習之 列表
1 列表型別 語法 li 屬性值列表值描述 none 無標記。disc 預設。標記是實心圓。circle 標記是空心圓。square 標記是實心方塊。decimal 標記是數字。decimal leading zero 0開頭的數字標記。01,02,03,等。lower roman 小寫羅馬數字 i...
python之列表操作
列表操作功能彙總 print 列表操作功能彙總 list demo first second thrid fourth 複製list demo列表取名list list list demo print 原列表為 list print print 輸出列表第乙個元素 list 0 print 輸出列表...