改进的解决方案：使用CSS自定义属性和变量

如果你只想使用现代/万年青浏览器，那么使用CSS自定义属性和变量是一个不错的选择！你可以将CSS自定义属性传递到:style绑定中，例如：

computed: {
  styleObject: function() {
    return {
      '--color': this.button.color,
      '--color-hover': this.button.colorHover
    }
  }
}

在您的模板中：

<custom-button :style="styleObject" />

对于CSS，这只是一个问题：

button {
  color: var(--color);
}

button:hover {
  color: var(--color-hover);
}

此方法的优点是您可以限定CSS自定义属性的范围，因此当您在元素级别（而不是在:root中）定义CSS属性时，这些变量将仅应用于特定的按钮组件。
唯一的缺点是，你必须反复声明所有处于悬停和非悬停状态的变量，这可能有点麻烦。但是，我认为这是一个非常小的缺点，与你从使用CSS变量中获得的好处相比。
请参阅下面的概念验证：
第一个

原始溶液：使用基于JS的鼠标事件

你可以将元素的悬停状态存储在data中，比如hoverState，默认设置为false，当@mouseenter被触发时，它被切换到true，当@mouseleave被触发时，它又被切换回false：
然后，您只需将computed属性绑定到style属性，例如styleObject。在此styleObject中，您可以根据组件数据中找到的hoverState返回正确的CSS样式：
第一个

其他方式（使用css变量）。

您需要创建带有样式的HTML

<style>
     div[vueid=${_uid}] { --btn-hover: ${`Here your hover brush`} }
</style>

并将其注入到组件中。

<template>
   <div vueid="_uid">
      <button></button>
      <div v-html="styleCode"></div>
   </div>
</template>

然后只需在静态css文件中使用此变量来设置按钮样式。

button:hover { background: var(--btn-hover); }

注：您可以在:root选择器中描述默认变量值。

您可以为Vuejs组件分配一个id，并在样式表中应用所需的悬停样式。

<button id="styledButton" type="button"
:style="{
color:button.color,
    backgroundColor:button.colorBackd,
    borderColor:button.borderColor,
}"
class="btn btn-outline-info large-button">

    {{ button.text }}
</button>

然后在标记中，

<style>
styledButton:hover {
color: #FFFFFF
};
</style>

如果希望悬停样式包含任何动态数据，请创建一个调用计算属性的标记。

<style>{{computedStyle}}</style>

如果使用单个文件组件，则只需使按钮样式具有作用域：

<template>
    <button></button>
</template>

<style scoped>
    button {
        /* your button style here */
    }
</style>

或者，对于更有限的样式，也可以使用模块，如下图所示：How to correctly use "scoped" styles in VueJS single file components?

在看到这是没有实现在vue我决定使用一个覆盖，这加起来使用：风格的覆盖，将显示通过改变不透明度。
它基本上是：

<div id="test" :style="style">
  <div class="overlay" :style="style.hover"></div>
</div>

第一个

我想改变悬停时z索引，这样悬停p标记就出现在顶部为此，我必须监听事件沿着一些值
第一次

<template>
...
<p @mouseover="changeZIndex"
   @mouseleave="changeZIndexToOriginal({$event,old_z_index})
>
...
</template>

<script>
...methods
changeZIndex(e){
    //change to new z-index
    e.target.style.zIndex = 5 //to show on top
}
changeZIndexToOriginal(e){
    //e.$event is  an event which is trirgered. to get event along with some value we have to use this approach
    // e.old_z_index is z-index that I want to set back again. I am just using loop index to set z-index
    e.$event.target.style.zIndex = e.old_z_index
}
...
</script>

使用上面的方法，我们可以改变任何与目标元素相关的东西。

我找到的一个非常简单的解决方案是使用v-bind:class指令：
在我的情况下，我需要添加一个悬停时，这个元素是不活动的：
:class="{'inactive': !item.count}"
在这种情况下，我可以将一个inactive属性添加到我的类中，然后用hover属性简单地设置该类的样式，如下所示：

.inactive {
  color: black;

  &:hover {
    background-color: green;   
  }
}

我正在使用vue 3和composition api，我认为有两种好的方法可以做到这一点。你可以像这样使用一个插槽和变量：

<MenuItem v-slot="{ active }">
  <a href="#" :class="[active ? 'bg-neutral-600' : '', text-sm']">File</a>
</MenuItem>

或者，您可以在CSS区段中使用任何模板变数搭配v-bind（），如下所示：

<template>
  <MenuItem class="menuClass">File</MenuItem>
</template>

<script>
export default {
  ...
  setup() {
    return {
      myObject,
    };
  },
};
</script>

<style>
.menuClass:hover {
  background-color: v-bind("myObject.hoverColor");
}
</style>