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

3 minuto(s)

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.

Código creado con Vue JS que permite cambiar el nombre de clase CSS
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:


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


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

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


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:

Le agregamos una clase CSS a la imagen con Vue JS
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.

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.