Vue2.0选中当前鼠标移入移除加样式

顺便为大家推荐好听的歌曲

 

 

效果如gif动态图所示：

1、通过v-for遍历数组

HTML代码：

<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 class="fl">{{index+1}}、</span>
            <span>{{item.text}}</span>
            <em @click="del">X</em>
        </div>
    </div>
</template>

 

2、通过鼠标移入移除、删除方法

JS代码：

<script>
export default {
  data(){
      return{
          isActive:false,
          items:[
              {
                  text:'吃饭',
              },
              {
                  text:'睡觉'
              },
              {
                  text:'上网'
              },
              {
                  text:'跑步'
              },
              {
                  text:'爬山'
              }
          ]
      }
  },
  methods:{
    //   鼠标移入
      mouseEnter(index){
        this.isActive = index;
      },
    //   鼠标移除
      mouseLeave(){
          this.isActive=null;
      },
    // 删除列表某一项
    del(index){
        this.items.splice(index,1);
    }
  }
}
</script>

 

3、CSS代码（这里采用Less）：

<style scoped lang="less">
.nav{
    width: 200px;
    .nav-item{
        width: 100%;
        height: 40px;
        padding-left: 10px;
        line-height: 40px;
        cursor:pointer;
        background-color: #f1f1f1;
        color: #333;
        &.active{
            background: #0190fe;
            color: #fff;  // 选中字体背景跟着改变
        }
        em{
            font-style: normal;
            float: right;
            padding-right: 10px;
            display: none;  //默认删除图标隐藏
        }
        &.active em{
            display: block;   // 鼠标放上去删除图标显示
        }
    }
}
</style>

 

若有不明白请加群号：复制 695182980 ，也可扫码，希望能帮助到大家。