[vue] 탭 윈도우 만들기

💡 포인트

• 다른 페이지가 필요하다면 vue-router 를 사용해도 되지만 간단한 UI 들은 탭으로 만드는 것이 더욱 편하다.
• 다만, 페이지 이동(앞으로가기, 뒤로가기) 와 같은 기능을 사용할 것이라면 vue-router 를 사용하는 것이 좋다.
• 목록 중 하나를 클릭하면, 그 게시물이 열리는 기능을 구현하기.
  이를 탭 윈도우라고 할 수 있는데, V-if 를 이용해서 간단히 구현할 수 있다.

😊 동적인 UI 만드는 방법

1. 탭의 기본틀을 짜준다.

버튼 0을 누르면 내용 0을 보여줌

  <div>내용1</div>
  <div>내용2</div>
  <div>내용3</div>
  <button>Button1</button>
  <button>Button2</button>
  <button>Button3</button>

버튼 클릭시 값을 v-if 의 조건에 맞게 바꿔주면 간단하게 탭 윈도우가 완성된다.

2. UI 현재 상태를 데이터로 만들기

step이 0이면 내용 0을, 1일때는 내용 1일 보여줌

export default {
  name: 'App',
  data(){
    return {
      step : 0,//
      post : insta,
      // insta라는 이름으로 불러온 데이터를 post라는 이름으로 저장
      더보기 : 0,
    }
  },

3. 상태에 따라 HTML이 어떻게 보일지

✍ v-if 와 @click 사용!!!

  <div v-if="step === 0">내용1</div>
  <div v-if="step === 1">내용2</div>
  <div v-if="step === 2">내용3</div>
  <button @click="step=0">Button1</button>
  <button @click="step=1">Button2</button>
  <button @click="step=2">Button3</button>

이 방법을 이용해서 뷰스타그램 탭을 만들어 보자.
( * 왜 탭을 사용하냐 ? 뒤로가기 버튼이 잘 먹고 간단한 UI는 라우터로 만들기 귀찮기 때문!)