Vue自定义实现tab标签栏切换（点击当前元素添加class 删除兄弟元素的class）

效果图先放上：

点击当前元素添加class同时删除兄弟元素的class 在jQuery中实现方法为 （此处元素假设为li）

 $("li").on("click", function () {
            $(this).addClass("active").siblings.removeClass("active")
        })

但是jQuery不支持微信小程序，以下记录我使用vue来实现这一功能的过程

①用v-bind给元素动态绑定class，同时绑定点击事件changeClass，并传递index参数

<li 
    v-for="(item,index) in itemList" 
    :key="index" 
    :class="activeClass == index ? 'active' : ''"  
    @click="changeClass(index)">
    {{item}}
</li>

②在data中声明一个变量activeClass

data() {
	return {
		activeClass: 0,                 // 默认选择第一个
		itemList:['求书信息','捐书信息'];
		},

③定义点击事件changeClass

methods: {
	changeClass(index) {
		this.activeClass = index 
			}
	}

④最后style中设置样式即可（标签激活后字体变色和添加底部横线）

li {
	position: relative;
	line-height: 60rpx;
	float: left;
	font-size: 32rpx;
	font-weight: bold;
	color: #8a8a8a;
	list-style: none;
    }

li.active {
            color: black;
            }
            
//tab标签激活后底部横线样式
li.active::after {
                position: absolute;
                left: 6rpx;
                z-index: 10;
                bottom: 0rpx;
                content: '';
                width: 116rpx;
                height: 6rpx;
                border-radius: 30rpx;
                background-color: #505B4D;
		}