鼠标移入添加class样式

HTML

HTML绑定事件,加入或者移出class为active

<span class="things" @click="toThings()"  v-on:mouseover="changeActive($event)" v-on:mouseout="removeActive($event)">报事</span>
<span class="things" @click="toRepairs()" v-on:mouseover="changeActive($event)" v-on:mouseout="removeActive($event)">报修</span>

注意这里v-on不能直接省略为@ ，我也不知道啥原因，反正试过了用@符号没有效果，可能我的页面没有直接渲染。

JS

这里除了active这个class需要动态添加或者减去,其他的皆是移入移出都需要的class

红框内所示

methods: {
  changeActive($event){
    $event.currentTarget.className="things active";
  },
  removeActive($event){
    $event.currentTarget.className="things";
  }
},

CSS

thing类为原来的样式，active为鼠标移上去的样式

.things{
    display: block;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    font-size: 0.37rem;
    text-align: center;
    line-height: 3rem;
    margin:0.8rem auto;
    background: #f4f5f7;
    color:#666666;
  }
  .active{
    background: #FEDF51;
    color:#a66f15;
  }

注意，这里如果直接用伪类样式的方法的话.thing:hover｛background:#fedf51;color:#a66f15;}的话，鼠标移上去只出现一下的效果，页面返回去看不到当前是点的哪一个选项，所以vue.js最好不要用hover。

拓展知识：vue实现鼠标移入移出事件

如下所示：

<div class="index_tableTitle clearfix" v-for="(item,index) in table_tit">
 <div class="indexItem">
  <span :title="item.name">{{item.name}}</span>
  <span class="mypor">
   <i class="icon" @mouseenter="enter(index)" @mouseleave="leave()"></i>
   <div v-show="seen&&index==current" class="index-show">
    <div class="tip_Wrapinner">{{item.det}}</div>
   </div>
  </span>
 </div>
</div>

export default {
 data(){
  return{
   seen:false,
   current:0
  }
 },
 methods:{
  enter(index){
   this.seen = true;
   this.current = index;
  },
  leave(){
   this.seen = false;
   this.current = null;
  }
 }
}

更多请参考：https://www.jb51.net/article/146107.htm