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):
- template, para el HTML,
- script, para la lógica o el JavaScript
- 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",
},
],
};
},
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter