vue 상단 메뉴 표시 줄 구현

vue 상단 메뉴 표시 줄,같은 페이지 두 메뉴 단추 사이 전환
먼저 전시 결 과 를 본다.
첫 번 째 단 추 를 누 르 면 내용 표시 1 두 번 째 단 추 를 누 르 면 내용 표시 2


아래 소스 코드:주의 하 세 요.코드 계획 하 세 요.따라 하지 마 세 요(⊙o⊙)

 <template>
<div>
 <div class="tab-content">
 <div class="tab-content1" @click="cur=1" :class="{active:cur==1}"><span>    </span> </div>
 <div class="tab-content2" @click="cur=2" :class="{active:cur==2}">   </div>
 </div>
 <div class="tab">
 <div v-show="cur==1">
 <div>  1</div>
 </div>
 <div v-show="cur==2">
 <div>  2</div>
 </div>
 </div>
</div>
</template>

<script>

export default {
 data () {
 return{
  cur:1
 }
 },

methods:{
 
 }
}
</script>
<style scoped>
.tab-content .active{
 background-color: #194e84 !important;
 color: #fff; 
}
.tab-content1{
 text-align: center;
 cursor: pointer;
 width: 150px;
 height: 30px;
 border: 1px solid #ccc;
}
.tab-content2{
 margin-top:-30px;
 text-align: center;
 cursor: pointer;
 margin-left:200px;
 width: 150px;
 height: 30px;
 border: 1px solid #ccc;
}
</style>

분할 선-간단 한 버튼 전환 이 완성 되 었 습 니 다.생각 이 아주 간단 하고 실현 이 매우 편리 하 며 사용 하기 도 좋 습 니 다.
:class="{active:cur=1}"메뉴 를 선택 할 때 스타일 을 바 꾸 는 코드 입 니 다.
vue.js 구성 요소 에 대한 튜 토리 얼 은 주제vue.js 구성 요소 학습 강좌를 클릭 하여 학습 하 십시오.
더 많은 vue 학습 튜 토리 얼 은 주 제 를 읽 으 세 요《vue 실전 교정》.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.