先说一下我想要实现的功能，就是点击li标签，给这个li标签加上颜色和底边框。函数里能获取到li的index下标，但是class切换没有效果

HTML代码：

​
      <ul class="menuUl">
        <li v-for="(li,index) in lis" @click="SelectLi(index)" :class="{isSelectedLi:SelectedLi===index}" :key="index">
          {{li}}
        </li>
      </ul>

JS代码：

​
  export default {
    name: "PersonalCenter",
    components: {
      Footer,
      Head
    },
    data() {
      return{
        lis:['我的会员','历史记录','收藏','设置'],
        SelectedLi:0
      }
    },
    methods: {
      SelectLi(index){
        console.log(index)
        this.SelectedLi=index
        console.log(this.SelectedLi===index)
      }
    }
  }

​

CSS代码：
在这之前我还给li标签设置了color样式和border-bottom样式，问题就出在这里，先加的样式不会被后加的样式覆盖，所以再绑定这个class加相同的样式就不会生效了

  .isSelectedLi{
    color: #2e7ce5;
    border-bottom: 1px solid #2e7ce5;
  }

​