Vue හි පුනරාවර්තන කොන්දේසි

අංග ලූපවලින් හරහා ගමන් කරන විට, කොන්දේසි යෙදිය හැකිය. නමුත් v-for සහ v-if නියෝජනාවලීන් විවිධ ටැගවල ලිවිය යුතුය, නැතහොත් ගැටළුවක් ඇති වේ. ගැටළු වළක්වා ගැනීම සඳහා v-for නියෝජනාවලිය template ටැගයට යොදනු ලැබේ, සහ v-if නියෝජනාවලිය - සෘජුවම තැන්පත් කරන ටැගයට.

අපි උදාහරණයක් දෙස බලමු. අප සතුව පහත දැක්වෙන අරාව ඇතැයි සිතමු:

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

මෙම අරාව ලූපයකින් හරහා ගමන් කරමු:

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

දැන් අපි ප්‍රදර්ශනය කරන අංග මත කොන්දේසියක් යොදමු:

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