点击当前元素添加 Class ，同时删除兄弟元素 Class

最新推荐文章于 2024-05-11 08:30:00 发布

奶油味的小布丁

最新推荐文章于 2024-05-11 08:30:00 发布

阅读量597

点赞数

文章标签： html 前端 css

本文链接：https://blog.csdn.net/qq_52766402/article/details/126251256

版权

效果：

点击当前元素添加 Class ，同时删除兄弟元素 Class

HTML

<view :class="{max:yijiIndex===index}" @click="yiIndex(index)"
    v-for="(item,index) in arryiji">{{item}}</view>

Script

data() {
    return {
        arryiji: ["全部","一番赏","全局赏","双随机","幽奇赛"],
		yijiIndex:0 ,
    }
},

methods: {
    yiIndex(index) {
	    this.yijiIndex=index
	},
}

Css

.max {
					width: 52px;
					height: 32px;
					opacity: 1;
					color: rgba(26, 26, 26, 1);
					font-size: 23px;
					font-weight: 400;
					font-family: "YouSheBiaoTiHei";
					text-align: center;
					line-height: 32px;
					letter-spacing: 0;
					white-space: nowrap;
					z-index: 999;
				}