깜놀하는 해므찌로

vue.js watch 데이터 모니터링 본문

IT

vue.js watch 데이터 모니터링

agnusdei1207 2023. 5. 13. 00:27
반응형
SMALL
<template>
    <div>
        <h1>Home {{ title1 }}</h1>
    </div>
    <input type="text" v-model="input1"> <!-- 양방향 입력 가능-->
    <button type="button" @click="getData">get</button> <!-- onclick 과 같은 효과 (vue.js)-->
    <button type="button" @click="setData">set</button> 
</template>

<script>
    export default{
        data(){
            return{
            title1 : "제목1",
            title2 : "제목2",
            input1 : "input1",
            }
        },
        watch : { // 모니터링
            input1(){
                console.log(intpu1);
            }
        },
        method : { // 자바스크립트의 모든 함수는 이곳에 선언
            getDate(){
                alert(this.input1);
            },
            setDate(){
                this.input1 = "set";
            },
        },
    }
</script>

1. watch 모니터링 할 변수명과 동일한 메소드명으로 생성

반응형
LIST