O componente ListView exibe uma lista de rolagem vertical. Você pode definir diferentes v-template para especificar como cada item na lista aparecerá.

<ListView for="item in listOfItems" @itemTap="onItemTap">
  <v-template>
    <Label :text="item.text" />
  </v-template>

  <v-template if="$odd">
    <Label :text="item.text" color="red" />
  </v-template>
</ListView>

No exemplo acima, o segundo template será usado se o index do item for ímpar. Por conveniência, você pode usar os helpers $index, $even e $odd, mas conforme necessário, você pode usar qualquer expressão javascript válido para a condição if dos v-template.

Para aprender mais sobre o componente v-template, veja a documentação do v-template.

O ListView não percorre os itens como é esperado usando um loop v-for. Em vez disso, ele só cria as views necessárias para mostrar os itens visíveis na tela, e é normalmente usado em aplicativos móveis para melhorar a performance. Isso é importante porque você não pode confiar nos eventos dentro do v-template, você deve usar o evento itemTap que contém o index do item tocado, assim como o item real da lista.

onItemTap(event) {
  console.log(event.index)
  console.log(event.item)
}

Propriedades

Eventos

Componente Nativo