Vue-da tsikllardagi shartlar

Tsikl elementlarini aylantirishda shartlarni qo'llash mumkin. Ammo v-for va v-if direktivalari turli teglarga yozilishi kerak, aks holda nizolar kelib chiqadi. Nizolarning oldini olish uchun v-for direktivasi template tegiga qo'llaniladi, v-if direktivasi esa - to'g'ridan-to'g'ri kiritilgan tegqa qo'llaniladi.

Keling, bir misolni ko'rib chiqaylik. Faraz qilaylik, bizda quyidagi massiv mavjud:

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

Keling, bu massivni tsikl bilan aylantiramiz:

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

Endi ko'rsatiladigan elementlarga shart qo'yamiz:

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],
  }
}