Как навести/навести указатель мыши на один элемент в списке в Vue?
У меня есть этот vue, который отображает список фруктов, используя v-for. При наведении курсора класс css hovering применяется ко всем элементам, а не только к одному элементу. Как мне исправить это в классе css hovering, чтобы он применялся только к элементу, на который я наводил курсор?
new Vue({
el: '#app',
data: {
fruits: ['apple','kiwi', 'orange'],
isHovering: false
}
}).hovering{
color: red
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id = "app">
<ul>
<li v-for = "fruit in fruits" @mouseover = "isHovering = true"
@mouseout = "isHovering = false"
:class = "{hovering: isHovering}">
{{ fruit }}
</li>
</ul>
</div>
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
3
1
2 433
1
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 1
Ответ принят как подходящий
Сотрите ":class="{hovering: Hovering}"" и вместо этого используйте общий псевдокласс CSS ":hover", например:
<template>
<div id = "app">
<ul>
<li v-for = "fruit in fruits" class = "hover" :key = "fruit" @mouseover = "isHovering = true"
@mouseout = "isHovering = false" >
{{ fruit }}
</li>
</ul>
</div>
</template>
new Vue({
el: '#app',
data: {
fruits: ['apple','kiwi', 'orange'],
isHovering: false
}
})
<style>
.hover:hover{
color: red
}
</style>
Другие вопросы по теме
Как я могу получить часы на данный момент в свойстве времени?
Проверка ввода формы bootstrap4
Модуль Vue JS NPM, импортированный в компонент
Функция vue-router beforeEach не возвращает элемент, который обновляется
Как правильно использовать сообщение об ошибке от Vuetify
Vue, Jest, Axios.create() и модульные методы API. Как шпионить?
Привязать обещание к компоненту в Vue
Vue 3 - inject() можно использовать только внутри установки или функциональных компонентов
Как использовать метод при загрузке страницы? VueX
Vue.directive вызывает дважды, если нажать кнопку вверх/вниз
Похожие вопросы
Ошибки на вслоте
Vuex - Как получить доступ к различным объектам состояния с помощью одной мутации/действия обновления?
Получение всех идентификаторов/значений в форме в vuejs
Vue js: отправить файл в API
Локализовать события нажатия кнопки на странице с помощью Vue
Nuxt.js: «npm run generate» не может сгенерировать «index.html»
Vue 3 — app.config не определен. Как обойти эту ошибку?
Есть ли простой способ вызвать метод из одного компонента в vue в другой?
Как перебирать formData и POST-запросы
Vue js Как закрыть раскрывающееся меню начальной загрузки при нажатии вне меню
Рассматривали ли вы вместо этого псевдокласс :hover?