Thuộc tính 'khóa' của Vue
Ví dụ
Thuộc tính key
được sử dụng trên các thành phần food-item
để xác định duy nhất từng thành phần được tạo bằng v-for
.
<food-item
v-for="x in foods"
:key="x.name"
:food-name="x.name"
:food-desc="x.desc"
:is-favorite="x.favorite"
/>
Chạy ví dụ »Định nghĩa và cách sử dụng
Thuộc tính key
được sử dụng với lệnh v-for
để Vue có thể phân biệt các phần tử một cách chính xác.
Vue tối ưu hóa hiệu suất bằng cách sử dụng lại các phần tử. Vì vậy, khi các phần tử được tạo từ một mảng bằng v-for
, nếu thuộc tính key
KHÔNG được sử dụng, các thuộc tính phần tử có thể bị trộn lẫn khi mảng được sửa đổi.
Để được giải thích kỹ lưỡng hơn và có ví dụ về sự cố xảy ra khi không sử dụng thuộc tính key
, hãy xem chương Thuộc tính 'khóa' trong hướng dẫn Vue.
Trang liên quan
Hướng dẫn Vue: Chỉ thị Vue v-for
Hướng dẫn Vue: Vue v-for Components
Hướng dẫn Vue: Vue Animations với v-for