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: [
        '차량옵션',
        '업체정보',
        '후기/평점',
        '환불규정'
      ]
    }
  }
}