码迷,mamicode.com
首页 > 其他好文 > 详细

Vue2.0教你当前选中鼠标移入移除加样式,实现显示隐藏

时间:2018-05-05 18:16:49      阅读:2548      评论:0      收藏:0      [点我收藏+]

标签:实现   exp   add   als   oat   turn   idt   display   round   

效果如gif动态图所示:

技术分享图片

1、通过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>

 

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

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>

 

3、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 ,也可扫码,希望能帮助到大家。

技术分享图片

Vue2.0教你当前选中鼠标移入移除加样式,实现显示隐藏

标签:实现   exp   add   als   oat   turn   idt   display   round   

原文地址:https://www.cnblogs.com/CinderellaStory/p/8995303.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!