点击哪个按钮就让哪个按钮高亮显示的代码如下:
<template>
<div>
<button @click.stop.prevent="preBtn($event)" class="selectBtn">
触发1
</button>
<button @click.stop.prevent="preBtn($event)" class="selectBtn">
触发2
</button>
<button @click.stop.prevent="preBtn($event)" class="selectBtn">
触发3
</button>
<button @click.stop.prevent="preBtn($event)" class="selectBtn">
触发4
</button>
</div>
</template>
<script>
import $ from 'jquery';
export default{
methods:{
preBtn(){
//这种写法第一次点击可以触发事件,但是样式不会生效,只有从第二次点击时才 会修改样式,达到想要的效果,而且看了打印结果之后发现,这样点击会触发好几次事件,性能上也相对较差,所以尝试了其它的想法
console.log('111')
$('.selectBtn').on('click', function () {
cosole.log('22')
$(this).addClass('two');
$('.selectBtn').addClass('one');
});
}
//这种思路,先给按钮先设置上默认样式,然后通过v-if/v-else进行切换,但是只要我一点击,全部按钮一次性都会切换其它颜色,不是我想要的效果
preBtn(){
if ($('.selectBtn').css('background', 'white')) {
$('.selectBtn').css('background', 'red');
} else {
$('.selectBtn').css('background', 'white');
}
}
//这种方法是最终能实现的效果,就是给事件传递一个参数,$event是指事件对象,通过e.target获取到当前button的dom元素,然后对它进行添加样式,这样点击任意一个按钮都可以实现样式亮高显示
preBtn(e){
console.log(e.target)
$(e.target).addClass('two')
}
}
}
</script>
<style>
.one {
background: #fff;
}
.two {
background: orange;
}
</style>