Como Agregar Un Nombre De Clase Al Hacer Clic en Vue 3

Nube Colectiva

hace 9 meses

Como Agregar Un Nombre De Clase Al Hacer Clic en Vue 3

En esta página:

Demo Github

Algo genial del framework Vue JS, es que nos permite crear tareas dinámicas en las interfaces de usuario.

Por ejemplo podemos agregar o quitar un nombre de clase CSS a un elemento HTML.

En este tutorial, te enseñaré a Como Agregar Un Nombre De Clase Al Hacer Clic en Vue 3, vamos con ello.

Con Vue JS también puedes cambiar el tamaño de un elemento

Para este ejemplo usaré la imagen del logo de Nube Colectiva, tu puedes usar el elemento HTML que desees.

Lo que haremos es que al presionar un botón le agregaremos un nombre de clase CSS con Vue.

Comenzamos importando el atributo ref de Vue y lo usamos dentro del hook setup() de Vue:


<script>

  // Importamos 'ref'  de Vue 
  import { ref } from 'vue'

  export default {

    setup() {
      const agregar = ref(false) // Variable 'agregar' con el atributo 'ref(false)' 
      return { agregar } // Devolvemos la variable 'agregar' 
    }

  }

</script>

// Importamos 'ref' de Vue

import { ref } from 'vue'

export default {

setup() {

const agregar = ref(false) // Variable 'agregar' con el atributo 'ref(false)'

return { agregar } // Devolvemos la variable 'agregar'

}

</script>

En nuestro template colocamos el botón y la imagen:


<template>
  <h1>Como Agregar El Nombre De Clase Al Hacer Clic en Vue 3</h1>

  <!-- Al presiona el botón cambiamos o quitamos el nombre clase CSS -->
  <button @click="agregar = !agregar">Agregar</button> 

  <br>   

  <!-- Imagen a la cual le cambiamos el nombre de clase -->
  <img :class="{ miclase: agregar }" src="./assets/logo.jpg" width="100px">
</template>

<h1>Como Agregar El Nombre De Clase Al Hacer Clic en Vue 3</h1>

<button @click="agregar = !agregar">Agregar</button>

<br>

</template>

Y por último creamos la clase llamada .miclase de CSS con la propiedad border y sus valores correspondientes:


<style>
  h1 {
    font-size: 28px;
  }

  img {
    margin-top: 30px;
  }

  /* Clase CSS */
  .miclase {
    border: solid 7px #ffa500;
  }
</style>

<style>

h1 {

font-size: 28px;

}

img {

margin-top: 30px;

}

/* Clase CSS */

.miclase {

border: solid 7px #ffa500;

}

</style>

Sabías que la empresa Nintendo usa Vue JS en algunos de sus proyectos.

A continuación todo el código del proyecto (He colocado comentarios para explicar que hace cada bloque importante del código):


<script>

  // Importamos 'ref'  de Vue 
  import { ref } from 'vue'

  export default {

    setup() {
      const agregar = ref(false) // Variable 'agregar' con el atributo 'ref(false)' 
      return { agregar } // Devolvemos la variable 'agregar' 
    }

  }

</script>

<template>
  <h1>Como Agregar El Nombre De Clase Al Hacer Clic en Vue 3</h1>

  <!-- Al presiona el botón cambiamos o quitamos el nombre clase CSS -->
  <button @click="agregar = !agregar">Agregar</button> 

  <br>   

  <!-- Imagen a la cual le cambiamos el nombre de clase -->
  <img :class="{ miclase: agregar }" src="./assets/logo.jpg" width="100px">
</template>

<style>
  h1 {
    font-size: 28px;
  }

  img {
    margin-top: 30px;
  }

  /* Clase CSS */
  .miclase {
    border: solid 7px #ffa500;
  }
</style>

// Importamos 'ref' de Vue

import { ref } from 'vue'

export default {

setup() {

const agregar = ref(false) // Variable 'agregar' con el atributo 'ref(false)'

return { agregar } // Devolvemos la variable 'agregar'

}

</script>

<h1>Como Agregar El Nombre De Clase Al Hacer Clic en Vue 3</h1>

<button @click="agregar = !agregar">Agregar</button>

<br>

</template>

<style>

h1 {

font-size: 28px;

}

img {

margin-top: 30px;

}

/* Clase CSS */

.miclase {

border: solid 7px #ffa500;

}

</style>

Entonces si voy al navegador y presiono el botón, puedo ver que le agregamos la clase CSS a la imagen.

Esta clase le agrega un borde de color naranja a la imagen:

Puedes agregarle otras propiedades a tu clase CSS

Así de fácil puedes Agregar Un Nombre De Clase Al Hacer Clic en un botón en Vue 3.

Al inicio de este tutorial he colocado una Demo para que veas el proyecto en acción, asimismo he colocado un enlace a un repositorio de GitHub en donde puedes encontrar todo el código del proyecto.

Aprende a Como Validar un Formulario con Vue JS 3.

Conclusión

En este tutorial has aprendido a Como Agregar Un Nombre De Clase Al Hacer Clic en Vue 3.

Éste tutorial te servirá como base para hacer tareas más dinámicas al presionar un botón en Vue.

Practica mucho, ya que solo así serás un mejor desarrollador en Vue.

Nota(s)

No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.

Síguenos en las Redes Sociales para que no te pierdas nuestros próximos contenidos.