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 ，也可掃碼，希望能幫助到大家。