[Vue] 탭(tab)UI 만들기

HTML에서 버튼1을 누르면 내용1 보이고, 버튼2는 내용2, 버튼3은 내용 3이 보여야 되는 UI를 만들어보자.

<div>내용0</div>
<div>내용1</div>
<div>내용2</div>
<button>버튼0</button>
<button>버튼1</button>
<button>버튼2</button>

 

UI 만드는 법 을 단계별로 작성한다.

1. 현재 상태를 data로 저장

data(){
  return {
    step : 0 //현재 탭 상태 기록할 데이터
  }
}

 

2. data에 따라서 HTML 어떻게 보여야하는지 작성 

<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>

 

---

멘탈이 흔들리는 요즘이다.

그래도 조금씩 연습해왔던 마음챙김이 조금은 도움이 되는거 같다.

다 지나간다. 지나갔고, 지금만 있다.

잡히지 않은 불안함보다 보이는 바로 앞, 지금 이 글을 적는 순간 내 힘만 믿자..!