Vue 클릭하여 Class 변경 사항을 전환하여 Active 현재 스타일 작업 수행
잉크가 많지 않으니 코드를 눌러라.
1. 현재 클릭한 요소를 저장하기 위해 데이터에 변수를 추가합니다
data() {
return {
activeClass: -1, // 0 ，-1
};
},
<li :class="activeClass == index ? 'active':''" v-for="(item,index) in itemList" :key="index" @click="getItem(index)">
{{itme.text}}
</li>
getItme(index) {
this.activeClass = index; // index， activeClass
},
.active {
/* background: #eee; */
color: #1e82d2;
font-weight: bolder;
}나는 쓸데없는 말을 더 이상 하지 않겠다. 모두들 코드를 직접 보는 것이 좋겠다.
<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;
},
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue Render 함수로 DOM 노드 코드 인스턴스 만들기render에서createElement 함수를 사용하여 DOM 노드를 만드는 것은 직관적이지 않지만 일부 독립 구성 요소의 디자인에서 특수한 수요를 충족시킬 수 있습니다.간단한 렌더링 예는 다음과 같습니다. 또한 v...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
