VueJS-시계 속성

이 장에서는 Watch 속성에 대해 알아 봅니다. 예제를 사용하여 VueJS에서 Watch 속성을 사용할 수 있음을 알 수 있습니다.

예

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "computed_props">
         Kilometers : <input type = "text" v-model = "kilometers">
         Meters : <input type = "text" v-model = "meters">
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#computed_props',
            data: {
               kilometers : 0,
               meters:0
            },
            methods: {
            },
            computed :{
            },
            watch : {
               kilometers:function(val) {
                  this.kilometers = val;
                  this.meters = val * 1000;
               },
               meters : function (val) {
                  this.kilometers = val/ 1000;
                  this.meters = val;
               }
            }
         });
      </script>
   </body>
</html>

위의 코드에서 우리는 두 개의 텍스트 상자를 만들었습니다. kilometers 그리고 다른 meters. 데이터 속성에서 킬로미터와 미터는 0으로 초기화됩니다. 두 가지 함수로 생성 된 시계 객체가 있습니다.kilometers 과 meters. 두 기능 모두에서 킬로미터에서 미터로, 미터에서 킬로미터로 변환이 수행됩니다.

어떤 texbox 에든 값을 입력하면 Watch는 두 텍스트 상자를 모두 업데이트합니다. 특별히 이벤트를 할당하고 변경 될 때까지 기다릴 필요가 없으며 추가 검증 작업을 수행합니다. Watch는 각 함수에서 수행 된 계산으로 텍스트 상자를 업데이트합니다.

브라우저에서 출력을 살펴 보겠습니다.