Watch

  • data 속성에서 정의한 변수를 감시하고 있다가 변수가 가지고 있는 값이 변경되면 이를 감지해 동작하는 요소

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
 
<div id="test1">
    input1 : <input type="text" v-model='a1'><br>
    input2 : <input type="text" v-model='a2'><br>
    <h3>{{a1}}</h3>
    <h3>{{a2}}</h3>
</div>
 
 
<script src="https://unpkg.com/vue"></script>
<script>
    new Vue({
        el : '#test1',
        data : {
            a1 : '',
            a2 : ''
        }
    })
</script>
</body>
</html>
cs

input에 text를 입력하면 바로적용되는 것을 볼 수가 있다.


Watch : 변수값의 변화를 감지할 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
 
<div id="test1">
    input1 : <input type="text" v-model='a1'><br>
    input2 : <input type="text" v-model='a2'><br>
    <h3>{{a1}}</h3>
    <h3>{{a2}}</h3>
</div>
 
 
<script src="https://unpkg.com/vue"></script>
<script>
    new Vue({
        el : '#test1',
        data : {
            a1 : '',
            a2 : ''
        },
        watch : {
            //변수 a1을 감시하는 watch 설정
            a1 : function(newVal, oldVal){
                console.log('a1의 새로운값' + newVal + ', 이전 값 : ' + oldVal)
            },
            //변수 a2를 감시하는 watch 설정
            a2 : function(newVal, oldVal){
                console.log('a2의 새로운값' + newVal + ', 이전 값 : ' + oldVal)
            },
        }
    })
</script>
</body>
</html>
cs


저작자표시

'Vue' 카테고리의 다른 글

Watch 와 Computed  (0) 2019.07.31
computed  (0) 2019.07.31
v-html, v-bind  (0) 2019.07.30
컴포넌트 (전역 컴포넌트와 지역 컴포넌트)  (0) 2019.07.30
라이프 사이클  (0) 2019.07.30

+ Recent posts

티스토리툴바