Vue 클릭하여 Class 변경 사항을 전환하여 Active 현재 스타일 작업 수행

Vue에 입문한 지 얼마 되지 않아 제작 과정에서 간단하고 실용적인 팁을 많이 만났습니다.
잉크가 많지 않으니 코드를 눌러라.
1. 현재 클릭한 요소를 저장하기 위해 데이터에 변수를 추가합니다

data() {
  return {
   activeClass: -1, // 0 ，-1 
  };
 },

2. Template에 있는 코드는 @click 방법에서 index를 보내야 한다는 것을 명심하세요.

<li :class="activeClass == index ? 'active':''" v-for="(item,index) in itemList" :key="index" @click="getItem(index)">
     {{itme.text}}
    </li>

3. 클릭 이벤트: 데이터에서 active Class의 값을 변경합니다

  getItme(index) {
   this.activeClass = index; //  index， activeClass
  },

4. 스타일에 적으세요.active 스타일

.active {
 /* background: #eee; */
 color: #1e82d2;
 font-weight: bolder;
}

추가 정보: Vue 비순환 active 클릭 전환 스타일 구현
나는 쓸데없는 말을 더 이상 하지 않겠다. 모두들 코드를 직접 보는 것이 좋겠다.

<div class="tab_basic">
  <span :class="{to_active:shows==1}" @click="today_a"> </span>
  <span :class="{to_active:shows==2}" @click="today_b"> </span>
  <span :class="{to_active:shows==3}" @click="today_c"> </span>
</div>
<style>
.to_active {background: #409eff!important;color: #fff;}
</style>
 method 
today_a(){
this.shows = 1;
},
today_b(){
this.shows = 2;
},
today_c(){
this.shows = 3;
},

일이 끝났으니 친구들이 더 좋은 방법을 공유할 수 있는 것을 환영합니다. 여러분께 참고가 되었으면 좋겠습니다. 저희도 많이 사랑해 주세요.