vue，style动态绑定css，绑定hover

vue的动态绑定css的话其实还好，不太难，难的是hover属性，

这个找了好久没找到怎么整，后来在stackoverflow上面看到了个https://stackoverflow.com/questions/46551925/vuejs-v-bindstyle-hover

1.首先在style 绑定一个变量

:style='styleObject'

2.在computed写一个计算属性

    styleObject() {

      return {

        "--background-color": this.buttonColor,

        "--background-color-hover": this.buttonHover,

      };

    },

3.data中定义buttonColor，buttonHover

4.最后直接在css中用

background-color:var(--background-color)

:hover里面

background-color:var(--background-color-hover)

完美