Condições em Loops no Vue

Ao iterar sobre elementos em loops, é possível aplicar condições. No entanto, as diretivas v-for e v-if precisam ser escritas em tags diferentes, caso contrário, haverá um conflito. Para evitar o conflito de diretivas, a v-for é aplicada à tag template, e a diretiva v-if - diretamente à tag que está sendo inserida.

Vamos ver um exemplo. Suponha que temos o seguinte array:

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

Vamos iterar sobre este array com um loop:

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

Agora, vamos aplicar uma condição aos elementos que são exibidos:

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