Vue2.0選中當前鼠標移入移除加樣式

 

本人寫的小程序，功能還在完善中，歡迎掃一掃提出寶貴意見！

 

 

 

 

 

效果如gif動態圖所示：

一、經過v-for遍歷數組

HTML代碼：

1 <template>
2     <div class="nav">
3         <div class="nav-item" v-for="(item,index) in items" :key="index" @mouseenter="mouseEnter(index)" @mouseleave="mouseLeave" :class="{active:index==isActive}">
4             <span class="fl">{{index+1}}、</span>
5             <span>{{item.text}}</span>
6             <em @click="del">X</em>
7         </div>
8     </div>
9 </template>

 

二、經過鼠標移入移除、刪除方法

JS代碼：

 1 <script>
 2 export default {
 3   data(){
 4       return{
 5           isActive:false,
 6           items:[
 7               {
 8                   text:'吃飯',
 9               },
10               {
11                   text:'睡覺'
12               },
13               {
14                   text:'上網'
15               },
16               {
17                   text:'跑步'
18               },
19               {
20                   text:'登山'
21               }
22           ]
23       }
24   },
25   methods:{
26     //   鼠標移入
27       mouseEnter(index){
28         this.isActive = index;
29       },
30     //   鼠標移除
31       mouseLeave(){
32           this.isActive=null;
33       },
34     // 刪除列表某一項
35     del(index){
36         this.items.splice(index,1);
37     }
38   }
39 }
40 </script>

 

三、CSS代碼（這裏採用Less）：

 1 <style scoped lang="less">
 2 .nav{
 3     width: 200px;
 4     .nav-item{
 5         width: 100%;
 6         height: 40px;
 7         padding-left: 10px;
 8         line-height: 40px;
 9         cursor:pointer;
10         background-color: #f1f1f1;
11         color: #333;
12         &.active{
13             background: #0190fe;
14             color: #fff;  // 選中字體背景跟着改變
15         }
16         em{
17             font-style: normal;
18             float: right;
19             padding-right: 10px;
20             display: none;  //默認刪除圖標隱藏
21         }
22         &.active em{
23             display: block;   // 鼠標放上去刪除圖標顯示
24         }
25     }
26 }
27 </style>

 

如有不明白請加羣號：複製 695182980 ，也可掃碼，但願能幫助到你們。