Điều kiện trong vòng lặp trong Vue

Khi lặp qua các phần tử bằng vòng lặp, có thể áp dụng các điều kiện. Nhưng các directive v-for và v-if cần được viết trên các thẻ khác nhau, nếu không sẽ xảy ra xung đột. Để tránh xung đột directive, v-for được áp dụng cho thẻ template, còn directive v-if - trực tiếp cho thẻ được chèn.

Hãy xem một ví dụ. Giả sử chúng ta có mảng sau:

javascriptdata() {
  return {
    arr: [1, 2, 3, 4, 5],
  }
}

Hãy lặp qua mảng này bằng vòng lặp:

html<template>
  <ul>
    <li v-for="elem in arr">
      {{ elem }}
    </li>
  </ul>
</template>

Và bây giờ hãy áp dụng điều kiện lên các phần tử được hiển thị:

html<template>
  <ul>
    <template v-for="elem in arr">
      <li v-if="elem % 2 === 0">
        {{ elem }}
      </li>
    </template>
  </ul>
</template>

javascriptdata() {
  return {
    items: [1, -2, 3, -4, 5],
  }
}