Admin.vue

김형우·2021년 12월 22일
0

vue.js

목록 보기
14/30

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>
profile
The best

0개의 댓글