Question

我需要一些帮助，我是vue.js的新手。我有以下

<ul>
  <li class="disable"><a href="#">Item 1</a></li>
  <li class="active"><a href="#">Item 2</a></li> //Currently doing mouseover
  <li class="disable"><a href="#">Item 3</a></li>
</ul>

如何在一个项目中进行mouseover并添加“活动”类，并向其他项目添加“禁用”类？

“基本上我想要的是，当我将鼠标悬停在任何项目上时，“活动”类具有更多的“禁用”类，而在进行鼠标移出时，只需删除“禁用”类，但保持“活动”类即可”

Answer 1

假设最初一个是活动的。

在不使用CSS disable的情况下，在active和:hover类之间切换。

 setLiActive(event){
    event.target.classList.remove('disable');
    event.target.classList.add('active');
 },
 setLiDisable(event){
    event.target.classList.remove('active');
    event.target.classList.add('disable');
 }

使用mouseover（添加活动类）和mouseleave（添加禁用类）

<ul>
  <li class="disable" @mouseleave="setLiDisable($event)"  @mouseover="setLiActive($event)" ><a href="#">Item 1</a></li>
  <li class="disable" @mouseleave="setLiDisable($event)" @mouseover="setLiActive($event)"><a href="#">Item 2</a></li> 
  <li class="disable"  @mouseleave="setLiDisable($event)"  @mouseover="setLiActive($event)"><a href="#">Item 3</a></li>
</ul>

function callMe() {
  var vm = new Vue({
    el: '#root',
    data: {
     isActive:true
    },
    created(){
     
    },
    methods: {
     setLiActive(event){
        event.target.classList.remove('disable');
        event.target.classList.add('active');
     },
     setLiDisable(event){
        event.target.classList.remove('active');
        event.target.classList.add('disable');
     }
    
    }

  })
}
callMe();

.active a{
color:red
}
.disable a {
   pointer-events: none;
   cursor: default;
   color:grey;
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.11/dist/vue.js"></script>
<div id='root'>
  <ul>
    <li class="disable" @mouseleave="setLiDisable($event)"  @mouseover="setLiActive($event)" ><a href="#">Item 1</a></li>
    <li class="disable" @mouseleave="setLiDisable($event)" @mouseover="setLiActive($event)"><a href="#">Item 2</a></li> 
    <li class="active"  @mouseleave="setLiDisable($event)"  @mouseover="setLiActive($event)"><a href="#">Item 3</a></li>
  </ul>
</div>

为每个项目添加课程

1 个答案: