Question

如何在列表项上的鼠标悬停上添加类并在鼠标离开时删除类

<li class="test" @mouseenter="thumbStyle" @mouseleave="thumbStyle2">1</li>
<li class="test" @mouseenter="thumbStyle" @mouseleave="thumbStyle2">2</li>
<li class="test" @mouseenter="thumbStyle" @mouseleave="thumbStyle2">3</li>

在数据和方法中

data(){
  isActive:false
}

thumbStyle:function(){
   this.isActive = true;
},


thumbStyle2:function(){
   this.isActive = false;
},

我已经尝试过了，但是当我遍历任何list（li）时，它只是将类添加到第一个元素（li）中。那么，仅添加this（悬停）li的技术是什么。就像在jquery中一样，$(this)

Answer 1

处理此问题的理想方法是，您要控制状态的每个元素都是模型，然后您可以轻松地操纵每个项目的状态。

这里是一个例子：

new Vue({
  el: '#app',
  data: function() {
    return {
      items: [{
        label: 'Planes',
        active: false
      }, {
        label: 'Trains',
        active: false
      }, {
        label: 'Automobiles',
        active: false
      }]
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.js"></script>

<div id="app">
  <ul>
    <li v-for="item in items" 
      @mouseenter="item.active = true"
      @mouseleave="item.active = false"
     >{{ item.label }} is {{ item.active }}</li>
  </ul>
</div>

Answer 2

我已经解决了以下问题

thumbStyle:function(e){
            var clickedElement = e.target;
            $(clickedElement).addClass('active');
        },
        thumbStyle2:function(e){
            var clickedElement = e.target;
            $(clickedElement).removeClass('active');
        },

vuejs mouseover将类添加到此元素

2 个答案: