Voorwaardes in Lusse in Vue

Wanneer jy deur elemente iterer met lusse, kan jy voorwaardes toepas. Maar die v-for en v-if direktiewe moet op verskillende etikette geskryf word, anders sal daar 'n konflik wees. Om die konflik te vermy word die v-for direkfief op die template-etiket toegepas, en die v-if direktef - direk op die ingevoegde etiket.

Kom ons kyk na 'n voorbeeld. Laat ons die volgende skikking hê:

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

Kom ons iterer deur hierdie skikking met 'n lus:

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

En nou laat ons 'n voorwaarde op die elemente wat vertoon word toepas:

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