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

waynebruce
  • 282

代码如下

<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事件就有点复杂了。。。

回复
阅读 8.7k
3 个回答

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

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

<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
        }
        
    }
}

不要绑定style,请绑定class

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏