Vue-da Sikllerde Şertler

Elementleri sikllar bilen gezekläp gözden geçirýänimizde, şertler goýup bilersiňiz. Emma v-for we v-if direktiwalaryny parhli teglere ýazmaly, ýoksa konflikt döner. Konfliktiň öňüni almak üçin v-for direktiwasyny template tegine ulanyň, v-if direktiwasyny bolsa goýberilýän taga göňüden-göni ulanyň.

Geliň mysala seredeliň. Aşakdaky ýaly massiwimiz bardygyny göz öňüne getireliň:

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

Bu massiwy sikl bilen gezekläp göçüreliň:

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

Indi görkezilýän elementlere şert goýalyň:

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