【vue】鼠标悬停加阴影样式

目标：
实现当鼠标悬浮，给所在block边上加上阴影的效果；

分析：
这种一般都是逻辑层和渲染层一起努力
逻辑层给个mouse_index，
当和当前block的index匹配的时候，
就通过

:class="mouse_index==index?'item-sel':'item'"

来作样式切换

效果：

代码：

(1) template：

<div class="disp"> 
  <div :class="mouse_index==index?'item-sel':'item'"  
      @mouseover="mouseOver(index)"
      v-for="(item,index) in disp" 
      :key="index">
    
  </div>
</div>

(2) script：

data：

 disp:[
   {},{},{}
 ],
 mouse_index:null,

methods:

mouseOver(index){
    this.mouse_index = index;
},

(3) style lang=“scss”

 .disp{
   margin-top: 38px;
   width: 100%;
   height: 214px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   .item{
     background: green;
     width: 346px;
     height: 100%;
   }
   .item-sel{
     background: red;
     width: 346px;
     height: 100%;
     box-shadow: 0 0 5px 3px #999;

   }
 }

总结：
依次类推，类似这种样式切换类的实现思路都是一致的；
将逻辑层和渲染层配合就可以了。