vue.js - 多个div上的Vuejs相同功能需要单独运行

Question

好吧，我有这两个带有鼠标悬停的 div，它们具有相同的功能。现在的问题是，如果我将鼠标悬停在其中一个上，那么两者都会发光。如何解决这个问题？当我将它们悬停时，它们会一一发光。

DIVS：

 <div class="latestItemBody" @mouseover="shineItemIcon"
@mouseout="shineOff" :style="{background: activeCardBg}">

<div class="latestItemBody" @mouseover="shineItemIcon"
@mouseout="shineOff" :style="{background: activeCardBg}">

职能：

methods: {
    shineItemIcon() {
        this.activeCardBg = '#7a00ff';
        this.bounce = 'animated bounceIn';
    },
    shineOff() {
        this.activeCardBg = '';
        this.bounce = '';
    }

标签： vue.js

Answer 1

将div id 作为参数传递给shineitemicon 和shineoff 函数。根据条件设置“activeCardBg”值。将 activecardBg1 给第一个 div，将 activeCardBg2 给第二个 div。