vue简易登录和div滑过变色

<template>
  <div id="app">
    <div class="login" ref="d" @mouseover="a()" @mouseleave="b()">
      用户名：<input type="text" class="wk" @blur="ss()" v-model="s" />
      <br />
      密 码 ： <input type="text" class="wk" @blur="aa()" v-model="z" />
      <br />
      <button class="wks">登录</button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
      return {
         d:'',
         s:'',
         z:''
      }   
  },
  methods : {
      a:function(){
          var obj=this.$refs.d
          obj.style='background-color:red'
      },
      b:function(){
         var obj=this.$refs.d
          obj.style='background-color:rgb(221, 207, 207)'
      },
      ss(){
          var obd=/\w{6,}/
          if(obd.test(this.s)==false){
                alert('用户名不符合')
          }
      },
      aa(){
          var obd=/\w{6,}/
          if(obd.test(this.z)==false){
                alert('密码不符合')
          } 
      }
  }
}
</script>

<style >
.login {
  width: 400px;
  margin: 10% auto;
  height: 250px;
}
.wk {
  width: 70%;
  height: 40px;
  margin-left: 40px;
  margin-top: 20px;
}
.wks {
  margin-left: 35%;
  margin-top: 45px;
  width: 100px;
  height: 40px;
}
</style>