탭 메뉴 스크립트를 뷰에서 어떻게 짜야하나요?

2019. 01. 17. 06:49
<ul class="cs-nav">
 <li class="active"><span>NOTICE</span></li>
 <li><span>FAQ</span></li>
 <li><span>Q&A</span></li>
</ul>

<script>
// 탭 클릭 이벤트
$('.cs-nav > li').click(function () {
    var num = $(this).index();
    $('.cs-nav > li, .cs-content-area').removeClass('active');
    $(this).addClass('active');
    csSwiper.slideTo(num, 500);
});
</script>

이 스크립트를 뷰에서 어떻게 구현해야 할까요?

현재 todo 리스트 정도 구현할 수 있는 단계라

어떻게 해야할지 감이 안 오네요 ㅜ

공유하고 보상받기 ♥︎

총 2개의 답변이 있습니다.

질문자 채택 답변
센트비

해당 부분만 예시로 작성해 봤습니다. 감이 오시나요?

<li
  v-for="(item, index) in tabMenu"
  :key="index"
  :class="{ active: index === activeIndex }"
  @click="activeIndex = index"
>

data () {
  return {
    activeIndex: 0
    tabMenu: ['NOTICE', 'FAQ', 'Q&A']
  }
}
2019. 01. 17. 16:22
34