Vue 选中当前鼠标移入移除加样式

<template>
     <div class="nav">
         <div class="nav-item" v-for="(item,index) in items" :key="index" @mouseenter="mouseEnter(index)" @mouseleave="mouseLeave" :class="{active:index==isActive}">
             <span>{{item.num}}</span>
         </div>
     </div>
 </template>

<script>
export default {
  data(){
      return{
          isActive:false,
          items:[
              {
                  num:'1',
              },
              {
                  num:'2'
              },
              {
                  num:'3'
              },
              {
                  num:'4'
              },
              {
                  num:'5'
              }
          ]
      }
  },
  methods:{
    //   鼠标移入
      mouseEnter(index){
        this.isActive = index;
      },
    //   鼠标移除
      mouseLeave(){
          this.isActive=null;
      }
  }
}
</script>

<style scoped lang="less">
.nav{
    width: 200px;
    .nav-item{
        width: 100%;
        height: 40px;
        padding-left: 10px;
        background: #f1f1f1;
        border: 1px solid #f7f7f7;
        &.active{
            background: #fff;
            border: 1px dashed  #333;
        }
    }
}
</style>