Vue - 간단한 탭 구현하기

탭을 누르면 그 탭에 해당하는 내용을 보여주는 코드를 구현하기

• 버튼0을 누르면 내용0, 버튼1을 누르면 내용1, 버튼2를 누르면 내용2가 보여진다.
• tab이란 변수를 만들고 초기값을 0으로 준다.
• 내용 div에 if문을 사용하고 특정한 숫자일 때 해당하는 내용을 보여주도록 한다.
• click함수를 만들어 tab의 값을 매긴다.
• 너무 간단하다.

<template>

    <div v-if="tab == 0">내용0</div>
    <div v-if="tab == 1">내용1</div>
    <div v-if="tab == 2">내용2</div>
    
    <button @click="tab = 0">버튼0</button>
    <button @click="tab = 1">버튼1</button>
    <button @click="tab = 2">버튼2</button>

</template>

<script>
export default {
	data() {
    	return {
        	tab: 0,
        }
    }
}
</script>