VueJS-v-bind：样式+悬停

您可以为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>

我想更改悬停时的z-index，使悬停的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>

使用以上方法，我们可以更改与目标元素相关的任何内容。

如果使用单个文件组件，则只需将按钮样式设置为作用域：

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

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

甚至对于更受限的样式，这里显示了一些模块：如何在VueJS单个文件组件中正确使用“作用域”样式？

其他方式（使用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选择器中描述默认变量值。