点击任意按钮不仅触发事件,还可以让其样式高亮

点击哪个按钮就让哪个按钮高亮显示的代码如下:

<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>