JavaScript — Наведите курсор мыши или наведите курсор мыши на vue.js

Наведите курсор мыши или наведите курсор vue.js

Можно переключать класс при наведении курсора строго в шаблоне компонента, однако это не практичное решение по понятным причинам. Для прототипирования, с другой стороны, я считаю полезным не определять свойства данных или обработчики событий в скрипте.

Вот пример того, как вы можете экспериментировать с цветами значков, используя Vuetify.

 new Vue({ el: '#app' }) 
 {amp}lt;link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material Icons" rel="stylesheet"{amp}gt; {amp}lt;link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet"{amp}gt; {amp}lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;div id="app"{amp}gt; {amp}lt;v-app{amp}gt; {amp}lt;v-toolbar color="black" dark{amp}gt; {amp}lt;v-toolbar-items{amp}gt; {amp}lt;v-btn icon{amp}gt; {amp}lt;v-icon @mouseenter="e ={amp}gt; e.target.classList.toggle('pink--text')" @mouseleave="e ={amp}gt; e.target.classList.toggle('pink--text')"{amp}gt;delete{amp}lt;/v-icon{amp}gt; {amp}lt;/v-btn{amp}gt; {amp}lt;v-btn icon{amp}gt; {amp}lt;v-icon @mouseenter="e ={amp}gt; e.target.classList.toggle('blue--text')" @mouseleave="e ={amp}gt; e.target.classList.toggle('blue--text')"{amp}gt;launch{amp}lt;/v-icon{amp}gt; {amp}lt;/v-btn{amp}gt; {amp}lt;v-btn icon{amp}gt; {amp}lt;v-icon @mouseenter="e ={amp}gt; e.target.classList.toggle('green--text')" @mouseleave="e ={amp}gt; e.target.classList.toggle('green--text')"{amp}gt;check{amp}lt;/v-icon{amp}gt; {amp}lt;/v-btn{amp}gt; {amp}lt;/v-toolbar-items{amp}gt; {amp}lt;/v-toolbar{amp}gt; {amp}lt;/v-app{amp}gt; {amp}lt;/div{amp}gt; 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector