问题描述
如何在列表项上的鼠标悬停时添加类并在鼠标离开时删除课
<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)
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>
2楼
我已经解决如下
thumbStyle:function(e){
var clickedElement = e.target;
$(clickedElement).addClass('active');
},
thumbStyle2:function(e){
var clickedElement = e.target;
$(clickedElement).removeClass('active');
},