给当前li添加上边框颜色

li上边框颜色默认为灰色，鼠标经过当前li，当前li添加上边框颜色变为红色，第一个li的上边框始终为红色。

实现此功能最根本的是要拿到当前经过li的index，所以菜单栏的每个li就不能写死，要通过v-for循环li渲染菜单。

然后就是给每个li通过:class动态的添加类名，而添加类名就需要满足一定的条件，这些条件就在事件处理函数中完成。

html结构：
<ul class="clearfix">
            <li v-for="(item,index) in menu" :key="index" :class="{checkedColor:currentIndex===index}" @mouseover="addColor(index)" @mouseleave="cancelColor(index)">
              <a href="javascript:;">{{item}}</a>
            </li>
          </ul>

data中定义属性：
data(){
    return{
currentIndex: 0,
menu: ['单曲', '歌手', '专辑', '视频', '歌词', '歌单', '声音主播', '用户']
}
}


methods中定义事件处理函数：
// 1、鼠标放在li上时的回调。
    addColor (index) {
      console.log(index)
      this.currentIndex = index
    },
    // 2、鼠标离开li时的回调。
    cancelColor (index) {
      this.currentIndex = 0
    }