En esta entrada, vamos a conocer como podemos emplear los condicionales y los ciclos, específicamente el for en Vue; por supuesto en los templates; el uso de los condicionales y ciclos en base a directivas aplican únicamente en los templates, ya que en el manejo de los script, puedes emplear cualquiera de los primitivas que te ofrece vanilla JavaScript o JavaScript puro (sin framework).

Recuerda que una app en Vue, consta de 3 bloques (opcionales):

1. template, para el HTML, 
2. script, para la lógica o el JavaScript 
3. style para el CSS.

La directiva v-if

La directiva v-if funciona como si fuera un condicional, permite evaluar condiciones de verdadero y falso que puedes estar en funciones, propiedades, etc

    <input v-if="setDefaultValue" type="number" v-model="valor" />
    <div v-else-if="valor == 5">Los dioses me dicen que valor es 5</div>
    <div v-else>Ya no hay campo jaja</div>

Como puedes ver; puedes atarle el else y el else if cuyo funcionamiento es igual al de un condicional, por lo tanto, puedes anidar condiciones.

Por aquí el bloque de JavaScript:

data() {
   return {
     valor: 0,
     setDefaultValue: true,
   };
 },

La directiva v-for

Con esta directiva podemos iterar listados; es decir, arrays:

    <div v-for="c in array" v-bind:key="c.id">
      <h3>{{ c.name }} {{ index }}</h3>
    </div>

O la forma más completa, con el índice y el elemento:

    <div v-for="(c, index) in array" v-bind:key="c.id">
      <h3>{{ c.name }} {{ index }}</h3>
    </div>

O con el array y/o basados en componentes:

    <hello-world v-for="c in [1, 2, 3, 4, 5]" v-bind:key="c.id" />
    <br />

Con los ciclos en pocas palabras, podemos repetir múltiples veces ya sea una etiqueta HTML o un componente de Vue.

Por aquí el bloque de JavaScript:

data() {
   return {
     array: [
       {
         id: "123",
         name: "andres",
       },
       {
         id: "1234",
         name: "juan",
       },
     ],
   };
 },