前端通过点击事件改变点击后标签状态

前端在做点击后改变标签状态的功能时可通过hover和active方法实现，但是此方法不灵活且代码冗余，下面就提供一个绑定动态class实现改变标签状态的方法。

此功能多数存在于循环的li标签中绑定点击事件，点击后改变li标签状态。

① html代码

<ul>
	<li
	v-for="(item, index) in menu"
	:key="index"
	@click="change_style(index)"
	:class="{ change_color: menu_color == index }"
	>
		<span>{{ item }}</span>
	</li>
</ul>

在li标签的循环中绑定点击事件，传入数组中唯一标识 index, 绑定的动态class中判断我们定义的值是否与index相等，如相等动态class生效。

② css代码

.change_color {
  color: white !important;
  background: #31bad0;
}

css中就写出点击之后需要的样式效果

③ 定义默认值

export default {
	data() {
		return {
			menu_color: 0,
		}
	}
}

先定义menu_color的默认值，页面初始化时默认改变第一个盒子的状态

④ js代码

change_style(index) {
	this.menu_color = index;
},

在methods中点击事件改变menu_color状态，从而改变标签状态