Condicionales y funciones en VueJS

¿Qué son las condicionales en Vuejs?

Las condicionales en vuejs, como en otros framework frontend,  nos permitiran hacer una vista dínamica. Mediante atributos, podremos añadirles a los elementos html condiciones que harán que se muestre un valor u otro, un elemento u otro elemento, etc.

Para ello, vamos a comenzar con un ejemplo muy práctico, en el que haremos uso de los condicionales if/else y crearemos una función. 

¿Qué vamos a hacer?

Vamos a crear dos botones, que controlen cuando nuestra aplicación este activada o desactivada y clicando en estos botones, se activará o desactivará.

Declararemos lo siguientes elementos:

• En nuestro html dos mensajes y dos botones. Los mensajes nos indicaran el estado de la aplicación y los botones cambiaran su estado.
• Una variable boolean, llamada activada, que por defecto será true.
• Una función que cambie la variable al valor contrario.

Uso de condionales en nuestro proyecto VueJS

Vamos a utilizar nuestro archivo App.vue que trae por defecto ya nuestro proyecto vuejs, si no sabes como generar un proyecto vuejs visita este artículo donde te explicamos como instalar y configurar tu primer proyecto vuejs.

En la parte de template crearemos nuestros dos botones:

<template>
  <div>
      <p v-if="activada">Aplicación activada</p>
      <p v-else>Aplicación Desactivada</p>

      <button @click="cambiarEstado()" v-if="!activada">Activar</button>
      <button @click="cambiarEstado()" v-else>Desactivar</button>
  </div>
</template>

Como vemos, estamos haciendo uso de las condiciones v-if y v-else.

El primer mensaje aparecerá si la variable «activada» es true, sino, aparecerá el segundo.

En los botones hacemos algo parecido, el primer botón aparecerá si la variable es false, ya que añadimos antes de la variable una exclamación que indica que aparecerá si la variable es lo contrario a true.

Nuestros botones también tienen una directiva llamada @click que lo que hace es llamar a una función cuando demos click sobre ellos.

Ahora veremos como declaramos la variable «Activada» y la función «cambiarEstado()» en la parte script, que si recordamos, es la parte donde irá toda la lógica de nuestro archivo vue:

<script>
export default {
  name: 'app',
  data () {
    return {
      activada : true,
    }
  },
  methods:{
    cambiarEstado(){
      this.activada = !this.activada;
    },
  }
}
</script>

En el apartado data, dentro del return, declararemos nuestra variable boolean con valor true y creamos un nuevo apartado llamado methods, que será donde crearemos nuestras funciones.

La función «cambiarEstado» lo que hace es, cada vez que criquemos en uno de nuestros botones, cambiará el estado de la variable activada, dandole como valor el contrario al que tiene.

Ahora, en el apartado style, le daremos un estilo para que nuestra aplicación se vea mejor:

<style>
 button{
   padding:1rem;
   font-size: 15px;
   min-width: 150px;
   border: none;
   cursor: pointer;
 }
 p{
   font-size:20px;
 }
</style>

Hecho esto, ya solo quedaría probar nuestra aplicación: