vue :class的动态切换

最新推荐文章于 2024-07-01 15:45:16 发布

闷声发大财..

最新推荐文章于 2024-07-01 15:45:16 发布

阅读量760

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_32825399/article/details/126602949

版权

直接上代码

在这里插入图片描述

	:class="[index == menu_index?`menu_index${index}`:'']"
	//点击事件获取下标和获取不同的值
@click="menuClick(index)

	data(){
			return{
				menu_img:'menu_index0',
				menu_index:0
			}}

// 菜单栏
			menuClick(index){
				this.menu_img = `menu_index${index}`
				this.menu_index = index
			}

	css

	.menu_index0{
		background: url('/static/258img/chi_active.png') no-repeat !important;
	}
	.menu_index1{
		background: url('/static/258img/he_active.png') no-repeat !important;
	}
	.menu_index2{
		background: url('/static/258img/zhu_active.png') no-repeat !important;
	}
	.menu_index3{
		background: url('/static/258img/wan_active.png') no-repeat !important;
	}