Watch 대신 Computed를 사용하면 반복된 코드를 하나로 통합 할 수 있다.
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 42 43 44 | <!DOCTYPE html> <html> <head> <title></title> </head> <body> <div id="test1"> data1 : <input type="text" v-model='data1'><br> data2 : <input type="text" v-model='data2'><br> <h3>result1</h3> <div>{{result1}}</div> <h3>result2</h3> <div>{{result2}}</div> </div> <script src="https://unpkg.com/vue"></script> <script> new Vue({ el : '#test1', data : { data1 : 'aaa', data2 : 'bbb', result1 : '' }, watch : { data1 : function(){ this.result1 = 'data1 : ' + this.data1 + ', data2 : '+ this.data2 }, data2 : function(){ this.result1 = 'data1 : ' + this.data1 + ', data2 : '+ this.data2 } }, computed : { result2 : function(){ return 'data1 : ' + this.data1 + ', data2 : ' + this.data2 } } }) </script> </body> </html> | cs |
