vue项目中鼠标移入就更换菜单的背景颜色

样图：

 

 

 思路：

　　动态绑定class，用@mouseenter（）绑定一个事件，并将列的索引index传入，然后在data里建一个变量来保存，默认-1 0的话页面刷新后第一个背景色就已经显示了

html　　

　　

　　<div class="item" v-for="(one, index) in categoryList" :key="one.categoryId" :class="{ cur: bgcolor === index }" >
    　　<h3 @mouseenter="changebgcolor(index)" @mouseleave="clearcolor"> 如果h3还有同级标签。可将鼠标移出的方法委派给父级标签
            <a href="">{{ one.categoryName }}</a>
     　　</h3>
　　</div>

js

data() {
    return {
      bgcolor: -1,
    };
  },
methods: {
    // 鼠标移动上更换背景色
    changebgcolor(index) {
      // index:鼠标移上的元素的索引值
      this.bgcolor = index;
    },
    //鼠标移出，还原颜色
    clearcolor(){
        this.bgcolor =  -1
    }
  },

css

.cur {
          background-color: skyblue;
     }