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

Question

<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 리스트 정도 구현할 수 있는 단계라

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

Answer 1

안녕하세요 자바스크립트로 탭 메뉴를 만들고 계시는군요

제가 탭 만들었을때 참고했던 사이트 남겨드립니다.

http://webruden.tistory.com/98

http://imivory.tistory.com/8

Answer 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'] } }