1

我是 vuejs 的新手，我有问题。看我的代码

模板：

<div class="component">
    <ul>
        <li v-for="game in games" :class="{active: isHover}" @mouseenter="isHover=true" @mouseleave="isHover=false">
            <div class="poster">
                <img :src="game.poster" :alt="game.title">
            </div>
            <transition name="show">
                <div class="information" v-if="isHover">
                    <div class="name">
                        <p>{{game.name}}</p>
                    </div>
                    <div class="text">
                        <p>{{game.demo}}</p>
                    </div>
                    <div class="link">
                        <a href="#">OPEN LINK</a>
                    </div>
                </div>
            </transition>
        </li>
    </ul>
</div>

脚本：

// Library
import {ref} from "vue";

// Export
export default {
    name: "GameBar",
    setup()
    {
        let isHover=ref(false)
        const games=ref([
            {
                name: 'RAINBOW SIX',
                demo: 'Some Text Some Text Some Text Some Text Some Text Some Text',
                poster: 'assets/home/media/game/3.jpg',
            },{
                name: 'PUBG',
                demo: 'Some Text Some Text Some Text Some Text Some Text Some Text',
                poster: 'assets/home/media/game/6.jpg',
            }
        ])
        return {
            isHover,games
        }
    }
}

风格：

.component{

    // Animation
    .show-enter-active,.show-leave-active{
        transition: all 0.2s ease;
    }
    .show-enter-to,.show-leave-from{
        opacity: 1;
    }
    .show-enter-from,.show-leave-to{
        opacity: 0;
        top: 5px !important;
    }
}

现在我的问题是当鼠标进入 li 时，所有 li 转换工作并显示信息类。我知道它是因为isHover变量。但我不知道在使用$(this).find(CHILD). 我搜索了很多，但没有找到解决方案...

4

1 回答 1

0

在组件数据函数中定义一个属性，例如hoveredItem，然后更改@moueseenter和@mouseleave处理程序进行this.hoveredItem相应设置。这是代码：

  data() {
    return {
      hoveredItem: '',
    };
  },

<li
  v-for="game in games"
  :key="game.name"
  :class="{active: game.name == hoveredItem}"
  @mouseenter="hoveredItem = game.name"
  @mouseleave="hoveredItem = ''"
>
  <!-- rest of the code -->
</li>
于 2022-01-29T07:18:40.133 回答