methods 감 잡힘
methods 에서 정의 하고,
div 에서 사용함
상태변수는 백엔드와 프론트엔드 사이에서
값의 가변성을 정의한다.
프론트에서 값이 변화하면 상태변수도 변하고
변화된 상태변수를 백으로 던진다.
백에서 온 데이터가 다르게 오면 상태변수가 바뀌고
상태변수가 바뀌면 프론트(화면)도 바뀐다.
<template>
<div class="container">
<h3>admin</h3>
<hr />
<input type="button" @click="menu=1" value="물품등록" />
<!-- 바꿀게 많으면 methods 쓰고, 단순하면 @click 등을 쓴다 -->
<input type="button" @click="menu=2" value="물품관리" />
<!-- <input type="button" value="게시물관리" /> -->
<input type="button" @click="changeMenu(3)" value="회원관리" />
<!-- @click="changeMenu(3)" methods 호출 -->
<!-- <input type="button" value="주문관리" /> -->
<div v-if="menu === 1">
<h5>물품등록</h5>
<input type="button" @click="addCount()" value="항목추가" />
<input type="button" @click="subCount()" value="항목삭제" />
<table>
<tbody>
<tr v-for="tmp in count" v-bind:key="tmp">
<td><input type="text" placeholder="물품코드" /></td>
<td><input type="text" placeholder="물품명" /></td>
<td><input type="text" placeholder="가격" /></td>
<td><input type="text" placeholder="판매수량" /></td>
</tr>
</tbody>
</table>
</div>
<div v-else-if="menu === 2">
<h5>물품관리</h5>
</div>
<div v-else-if="menu === 3">
<h5>회원관리</h5>
</div>
</div>
</template>
<script>
export default {
data() {
return {
menu : 1,
count : 5,
}
},
methods:{
changeMenu(no){
this.menu = no;
},
addCount(){
// this.count = this.count + 1; // 1씩 증가
this.count++;
if(this.count > 10) { // 10보다 크면 10으로 둔다.
this.count = 10;
}
},
subCount(){
this.count--;
if(this.count < 1){ // 1보다 작으면 1로 둔다.
this.count = 1;
}
}
}
}
</script>
<style scoped>
@import '../assets/css/mystyle1.css';
</style>