#3 tab 구현하기 1 - class 바인딩

tab 구현하기 첫번째.
class binding하여 현재 있는 탭 위치를 보여주기.
ex) 각종 tab을 통해 분류하여 보여주기

tab 구현하기 과정
1. tab 의 네비게이션 부분에 클래스 바인딩 해준다.
2. 탭을 클릭할때, 해당 tab이름을 불러온다.
3. 해당 tab이름으로 선택된 tab에 'active' 클래스를 넣어준다.

<style>
.active {
	background : red;
    color : yellow;
}
</style>
<template>
	<nav>
    	<div 
        @click="tabnav('drink')"
        :class="{ 'active' : tab == 'drink' }"
        >음료</div>
    	<div 
        @click="tabnav('food')"
        :class="{ 'active' : tab == 'food' }"
        >음식</div>
    	<div 
        @click="tabnav('desert')"
        :class="{ 'active' : tab == 'desert' }"
        >디저트</div>
    </nav>
</template>

<script>
	data () {
    	return {
        	tab = ''
        }
    },
    methods : {
    	tabnav : function(tabName){
        	this.tab = tabName;
        }
    }
</script>