Vue 点击li动态更改样式

20230327160539

一、问题描述
点击导航栏中的一项切换选中后的样式

template 的内容
:class=“{ active: index == isActive }” 绑定active类，当点击后的值和li的值一致时 添加active类

<li v-for="(item, index) in navdata" :key="index">
	<div :class="{ active: index == isActive }" @click="BookClick(index)">
		{{ item.label }}
 	</div>
</li>

script data中定义

默认选中li的第一个

isActive : 0

script methods中定义点击的方法

BookClick(index) {
	  // 把点击li的索引赋给 isActive
      this.isActive = index
},

style 选中的样式

.active {
        height: 50px;
        font-size: 14px;
        color: #f26552;
        border-bottom: 2px solid #f26552;
      }