data1 : ' ' 이 input의 v-model에 채워지게 된다.



 get로 데이터를 가져온다.

결과


get으로 가져오는건 되지만 입력하는건 에러가 발생된다. 


set로 입력을 가능하게 한다.

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
38
39
40
41
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
 
    <div id="test1">
        <input type="text" v-model='data1'><br>
        <input type="text" v-model='data2'><br>
        <input type="text" v-model='data3'><br>
    </div>
 
<script src="https://unpkg.com/vue"></script>
<script>
    new Vue({
        el : '#test1',
        data : {
            data1 : 'aaa',
            data2 : 'bbb',
        },
        computed : {
            data3 : {
                get : function(){
                    return this.data1 + ',' + this.data2
                },
                set : function(newValue){
                    // 쉼표기준으로 자른다
                    var list = newValue.split(',')
 
                    if(list.length >= 2){
                        this.data1 = list[0]
                        this.data2 = list[1]
                    }
                }
            }
        }
    })
</script>
</body>
</html>
cs


Set과 Get을 이용하여 연산통해 얻어진 값을 새롭게 셋팅하거나 가져다 사용할 수 있다.

저작자표시

'Vue' 카테고리의 다른 글

css 클래스 바인딩  (0) 2019.07.31
속성값 바인딩하기  (0) 2019.07.31
Watch 와 Computed  (0) 2019.07.31
computed  (0) 2019.07.31
Watch  (0) 2019.07.31

+ Recent posts

티스토리툴바