vue 點(diǎn)擊click時(shí)間的時(shí)候怎么讓mouseout不執(zhí)行

<template>
<div>

<ul>
  <li><a :class="{'btn1':btn1,'btnHover1':btnHover1}" @click="btnClick1()" @mouseover="btnOver1()" @mouseout="btnOut1()">按鈕1</a></li>
  <li><a :class="{'btn2':btn2,'btnHover2':btnHover2}" @click="btnClick2()" @mouseover="btnOver2()" @mouseout="btnOut2()">按鈕2</a></li>
  <li><a :class="{'btn3':btn3,'btnHover3':btnHover3}" @click="btnClick3()" @mouseover="btnOver3()" @mouseout="btnOut3()">按鈕3</a></li>
</ul>

</div>
</template>
<script>
export default {

data() {
  return {
    btn1:true,
    btnHover1:false,
    btn2:true,
    btnHover2:false,
    btn3:true,
    btnHover3:false,
  }
},
mounted() {

},
methods: {
  btnOver1(){
    this.btn1=false;
    this.btnHover1=true;
  },
  btnOut1(){
    this.btn1=true;
    this.btnHover1=false;
  },
  btnClick1(){
    this.btnHover1=true;
  },
  btnOver2(){
    this.btn2=false;
    this.btnHover2=true;
  },
  btnOut2(){
    this.btn2=true;
    this.btnHover2=false;
  },
  btnClick2(){
    this.btnHover2=true;
  },
  btnOver3(){
    this.btn3=false;
    this.btnHover3=true;
  },
  btnOut3(){
    this.btn3=true;
    this.btnHover3=false;
  },
  btnClick3(){
    this.btnHover3=true;
  },
}

}
</script>
<style lang="less" scoped>
div{
margin-top: 200px;
margin-left: 200px;
li{

list-style: none;
float: left;

}
a{

cursor: pointer;

}
.btn1{

background-color:#00BBFF;
text-decoration: none;
color: #222222;
padding: 10px;

}
.btnHover1{

background-color:#953b39;
text-decoration: none;
color: #4cae4c;
padding: 10px;

}
.btn2{

background-color:#00BBFF;
text-decoration: none;
color: #222222;
padding: 10px;

}
.btnHover2{

background-color:#953b39;
text-decoration: none;
color: #4cae4c;
padding: 10px;

}
.btn3{

background-color:#00BBFF;
text-decoration: none;
color: #222222;
padding: 10px;

}
.btnHover3{

background-color:#953b39;
text-decoration: none;
color: #4cae4c;
padding: 10px;

}
}

</style>

當(dāng)我點(diǎn)擊按鈕1的時(shí)候會(huì)被mouseout干擾