Vue v-for Chỉ thị
Với JavaScript thông thường , bạn có thể muốn tạo các phần tử HTML dựa trên một mảng. Bạn sử dụng vòng lặp for và bên trong bạn cần tạo các phần tử, điều chỉnh chúng rồi thêm từng phần tử vào trang của mình. Và những phần tử này sẽ không phản ứng với sự thay đổi trong mảng.
Với Vue, bạn bắt đầu với phần tử HTML mà bạn muốn tạo thành danh sách, với thuộc tính v-for , tham chiếu đến mảng bên trong phiên bản Vue và để Vue lo phần còn lại. Và các phần tử được tạo bằng v-for sẽ tự động cập nhật khi mảng thay đổi.
Hiển thị danh sách
Việc hiển thị danh sách trong Vue được thực hiện bằng cách sử dụng lệnh v-for , do đó một số phần tử HTML được tạo bằng vòng lặp for.
Dưới đây là ba ví dụ hơi khác nhau khi sử dụng v-for .
Ví dụ
Hiển thị danh sách dựa trên các mục của một mảng.
<ol>
<li v-for="x in manyFoods">{{ x }}</li>
</ol>
Hãy tự mình thử »Lặp qua một mảng
Lặp qua một mảng để hiển thị các hình ảnh khác nhau:
Ví dụ
Hiển thị hình ảnh về món ăn, dựa trên một mảng trong phiên bản Vue.
<div>
<img v-for="x in manyFoods" v-bind:src="x">
</div>
Hãy tự mình thử »Lặp qua mảng đối tượng
Lặp qua một mảng các đối tượng và hiển thị các thuộc tính của đối tượng:
Ví dụ
Hiển thị cả hình ảnh và tên của các loại thực phẩm khác nhau, dựa trên một mảng trong phiên bản Vue.
<div>
<figure v-for="x in manyFoods">
<img v-bind:src="x.url">
<figcaption>{{ x.name }}</figcaption>
</figure>
</div>
Hãy tự mình thử »Lấy chỉ mục
Số chỉ mục của một phần tử mảng có thể thực sự hữu ích trong các vòng lặp for của JavaScript. May mắn thay, chúng ta cũng có thể lấy được số chỉ mục khi sử dụng v-for trong Vue.
Để lấy số chỉ mục bằng v-for chúng ta cần đưa ra hai từ được phân tách bằng dấu phẩy trong ngoặc đơn: từ đầu tiên sẽ là phần tử mảng và từ thứ hai sẽ là chỉ mục của phần tử mảng đó.
Ví dụ
Hiển thị số chỉ mục và tên thực phẩm của các phần tử trong mảng 'manyFoods' trong phiên bản Vue.
<p v-for="(x, index) in manyFoods">
{{ index }}: "{{ x }}" <br>
</p>
Hãy tự mình thử »Chúng ta cũng có thể hiển thị cả chỉ mục phần tử mảng và thông tin từ chính phần tử mảng đó, nếu các phần tử mảng là đối tượng:
Ví dụ
Hiển thị cả số chỉ mục phần tử mảng và văn bản từ các đối tượng trong mảng 'manyFoods'.
<p v-for="(x, index) in manyFoods">
{{ index }}: "{{ x.name }}", url: "{{ x.url }}" <br>
</p>
Hãy tự mình thử »