Đối với bất cứ Javascript framework nào, xử lý render với điều kiện và vòng lặp được sử dụng rất phổ biến. Vue.js cung cấp một hệ thống mạnh mẽ để áp dụng các hiệu ứng chuyển đổi khi một phần tử web được thêm vào, cập nhật, hoặc gỡ bỏ khỏi DOM đó là v-if và v-for.

Render theo điều kiện

Ta cùng xem qua ví dụ sau:

<template>
  <div>
    <div>
      <h3 v-if="status">You can see this message.</h3>
    </div>
    <div>
      <h3 v-if="grade >= 3.2">You are excellent!</h3>
      <h3 v-else-if="2.5 <= grade && grade < 3.2">You are quite good!</h3>
      <h3 v-else>it's only just begun!</h3>
    </div>
  </div>
</template>

// ...
data() {
  return {
    status: true,
    grade: 4
  }
}

Ví dụ rất dễ hiểu đúng không nào. Hai dòng <h3> sẽ được in ra trên màn hình dựa theo điều kiện do tham số truyền vào.

Cú pháp v-if, v-else-if, v-else có thể giúp chúng ta giải quyết mọi vấn đề của “Conditional Rendering” trong Vue.js. Ngoài ra, Vue.js không chỉ support nó cho các phần tử đơn lẻ, mà còn cho nhóm phần tử thông qua <template>

<template v-if="ok">
  <h1>I am the best.</h1>
  <p>Hi there, my name is Yeulaptrinh.vn!</p>
  <p>Something wrong?</p>
</template>

Render danh sách

Vue.js hỗ trợ render theo mảng hoặc object với cùng cú pháp:

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{index}}. {{ item.name }}
      </li>
    </ul>
  </div>
</template>

// render an array 
items: [
  { name: 'Apple' },
  { name: 'Google' },
  { name: 'Amazon' }
]

Render với Object:

<div v-for="(value, key) in object" :key="key">
  {{ key }}: {{ value }}
</div>

// render an array 
object: {
  name: 'Yeulaptrinh.vn',
  age: 1,
  address: 'Ha Noi'
}

Khi cập nhật một danh sách các phần tử được render với v-for, mặc định Vue.js sẽ sử dụng kĩ thuật “inline patch” (hiểu nôm na là “vá tại chỗ”). Điều này có nghĩa là nếu thứ tự của các item thay đổi, thay vì dịch chuyển các phần tử web theo thứ tự tương ứng, Vue sẽ patch mỗi phần tử tại chỗ và bảo đảm phản ánh đúng những gì cần phải render tại vị trí đó.

Mình khuyến khích sử dụng :key cho bất cứ khi nào bạn dùng v-for bởi vì đây là cơ chế Vue.js nhận ra các node, giúp cơ chế render danh sách của nó luôn được bảo toàn.

Ngoài ra v-for còn rất nhiều cách dùng khác các bạn có thể tìm hiểu thêm tại trang chủ của Vue.js

Vận dụng thử kết hợp render theo điều kiện và danh sách

Chúng ta có danh sách một lượng lớn hoa quả, trong đó có trái cây từ Mỹ, từ Trung Quốc, và nhiều nơi khác, cả loại không rõ nguồn gốc. In ra màn hình danh sách trái cây có nguồn gốc và không từ Trung Quốc.

fruits: [
  { name: 'Apple', origin: 'American' },
  { name: 'Pear', origin: 'China' },
  { name: 'Pineapple', origin: 'My Tho' },
  { name: 'Banana', origin: 'Ha noi' },
  { name: 'Orange', origin: 'China' },
  { name: 'Lemon', origin: 'Unknown' },
  { name: 'Watermelon', origin: 'Laos' }
]

Chúng ta kết hợp v-if và v-for như thế nào nhỉ? Chúng ta có solution như sau:

<template>
  <div>
    <li v-for="fruit in fruits" :key="fruit.name"
        v-if="fruit.origin !== 'China' && fruit.origin !== 'Unknown'">
      {{ fruit.name }}: {{ fruit.origin }}
    </li>
  </div>
</template>

Lưu ý rằng; v-for có độ ưu tiên cao hơn v-if , có nghĩa là v-if  sẽ được thực thi một cách riêng biệt trên mỗi vòng lặp của v-for.

Tuy nhiên, ta có thể áp dụng một solution khác đơn giản và hay được sử dụng hơn bằng Computed property của Vue.js. Cùng đón chờ bài viết tiếp theo của mình nhé! Hẹn gặp lại!