请问vue 怎么绑定 包含css伪类的style?

Question

代码如下

<div id="app">
    <div :style="baseStyle">123456</div>
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            rgb:'red',
            hrgb:'blue'
        },
        computed:{
            baseStyle(){
                return{
                    color:this.rgb,
                    hover:{
                        color:this.hrgb //无效果
                    }
                }
            }
        }
    })
</script>

请问这个hover伪类要怎么写呢？如果用mouseover,out事件就有点复杂了。。。

Answer 1

hover写到css里面呀，你绑一个class名就行了，添加或者移除这个class名，js的hover只能用mouse事件

Answer 2

用鼠标事件也不会很复杂啊……

<div :style="{color: colorlist.red}" ref="line" @mouseenter="enterLine(true)" @mouseleave="enterLine(false)">this is test line.</div>

加个事件

data(){
    return {
        colorlist: {
            red: 'red',
            green: 'green'
        }
    }
},
methods: {
    enterLine(isChange){
        if(isChange){
            this.$refs.line.style.color = this.colorlist.green
        }else{
            this.$refs.line.style.color = this.colorlist.red
        }
        
    }
}

Answer 3

不要绑定style，请绑定class