Vue 中的 key 屬性是用于區分具有相同標簽名的子組件或元素的重要屬性之一。在 Vue 中,每個子組件或元素都應該有一個可唯一標識該組件或元素的 key 值。如果不為每個子組件或元素指定唯一的 key 值,則可能會導致 Vue 的渲染性能下降,同時可能會出現意想不到的結果。
以下是一個示例:
<ul>
<li v-for="item in items" :key="item.id">
{{ item.text }}
</li>
</ul>
在這個例子中,我們使用 v-for 指令來循環遍歷一個數組并生成多個 li 元素。為了避免渲染性能下降,我們必須為每個 li 元素指定一個唯一的 key 值。在這個例子中,我們使用 item.id 作為每個 li 元素的 key 值。
另外,如果我們在同一父元素下調換 li 元素的順序,Vue 也可以正確地重新排序元素,而不會重新渲染整個列表。以下是一個示例:
<ul>
<li v-for="item in items" :key="item.id">
{{ item.text }}
</li>
</ul>
在這個例子中,我們使用 v-for 指令來循環遍歷一個數組并生成多個 li 元素。在調換 li 元素的順序后,Vue 可以根據 key 值來重新排序元素,而不會重新渲染整個列表。
上一篇vue tagview
下一篇vue key name