Vue 탭 UI

출처

 

Vue 탭 UI

간단하게 요약하자면
인덱스 번호를 저장하는 변수를 만들고
for문의 인덱스를 사용해 클릭했을때 변수에 숫자를 입력하게 되고
그 숫자에 맞는 컨텐츠를 v-show로 노출하는 것 이다.

<template>
<div class="tab-box">
    <ul class="tab-btn-list">
       <li v-for="(tab, index) in tabList" :key="index" :class="{active:currentTab === index}">
          <a href="#" @click.prevent="currentTab = index">{{ tab }}</a>
       </li>
    </ul>
</div>

<div v-show="currentTab == 0" class="tab-cont"></div>
<div v-show="currentTab == 1" class="tab-cont"></div>
<div v-show="currentTab == 2" class="tab-cont"></div>
<div v-show="currentTab == 3" class="tab-cont"></div>
</template>

export default {
  data () {
    return {
      currentTab: 0,
      tabList: [
        '차량옵션',
        '업체정보',
        '후기/평점',
        '환불규정'
      ]
    }
  }
}