-
<div>내용0</div> <div>내용1</div> <div>내용2</div> <button>버튼0</button> <button>버튼1</button> <button>버튼2</button>
이런, 기본적인 ui를 만들고 탭기능을 만들어보면,
먼저, UI 현재상태를 데이터로 만들고, 상태에 따라 HTML이 어떻게 보일지 작성하면 된다.
step : 0이란 데이터를 만들고,
<div v-if="step == 0">내용0</div> <div v-if="step == 1">내용1</div> <div v-if="step == 2">내용2</div> <button @click="step=0">버튼0</button> <button @click="step=1">버튼1</button> <button @click="step=2">버튼2</button>
이런 식으로, v-if를 이용하면 조건에 맞을때 보여주므로 성공이다.
이걸 이용해서 간단한 페이지정돈 step에 맞춰서 페이지를 보여주게끔 만들 수 있다.
'Vue.js' 카테고리의 다른 글
글 발행기능 (0) 2022.08.01 서버없이 업로드한 이미지다루기 (0) 2022.07.29 ajax로 더보기 버튼만들기 (0) 2022.07.29 라우터 나머지 기능 (0) 2022.07.26 Nested routes와 push함수 (0) 2022.07.25