Crear un efecto Hover en Vue.js

Vue es un marco progresivo para construir interfaces de usuario. La biblioteca principal se centra solo en la capa de visualización y es fácil de seleccionar e integrar con otras bibliotecas. Vue también es perfectamente capaz de impulsar sofisticadas aplicaciones de una sola página en combinación con herramientas modernas y bibliotecas de soporte.

Para crear el efecto de desplazamiento para obtener más información al pasar el mouse, debemos vincular el atributo ‘título’ y asignar un título adecuado que queremos mostrar al pasar el mouse sobre el elemento vue. Si no tiene sentido, saltemos al ejemplo para obtener una visión más clara.

Ejemplo:

Nombre de archivo: index.html

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <script src=
"https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
    </script>
</head>
  
<body>
    <div id='parent'>
        <h3>
            Different Frameworks and 
            Libraries in JavaScript
        </h3>
        <button v-bind:title='reactMsg'>React</button>
        <button v-bind:title='vueMsg'>Vue</button>
        <button v-bind:title='angularMsg'>Angular</button>
        <script src='app.js'></script>
    </div>
</body>
</html>

Nombre de archivo: app.js

Javascript

const parent = new Vue({
    el : '#parent',
    data : {
  
        // Data that interpolate in DOM
        reactMsg: "React with Redux works awesome",
        vueMsg: "Vue is a progressive framework 
                 for building user interfaces",
        angularMsg: "Angular is awesome for single 
                    page application development"
    }
})

Producción:

Publicación traducida automáticamente

Artículo escrito por hunter__js y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *