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으로 초기화됩니다. 두 가지 함수로 생성 된 시계 객체가 있습니다.kilometersmeters. 두 기능 모두에서 킬로미터에서 미터로, 미터에서 킬로미터로 변환이 수행됩니다.

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

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

킬로미터 텍스트 상자에 몇 가지 값을 입력하고 미터 텍스트 상자에서 값이 변경되는 것을 확인하고 그 반대의 경우도 마찬가지입니다.

이제 미터 텍스트 상자에 입력하고 킬로미터 텍스트 상자에서 변경되는 것을 보겠습니다. 브라우저에 표시되는 화면입니다.