VueJS - Xem tài sản

Trong chương này, chúng ta sẽ tìm hiểu về thuộc tính Watch. Sử dụng một ví dụ, chúng ta sẽ thấy chúng ta có thể sử dụng thuộc tính Watch trong VueJS.

Thí dụ

<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>

Trong đoạn mã trên, chúng tôi đã tạo hai hộp văn bản, một hộp có kilometers và khác với meters. Trong thuộc tính dữ liệu, km và mét được khởi tạo bằng 0. Có một đối tượng đồng hồ được tạo với hai chức năngkilometersmeters. Trong cả hai chức năng, việc chuyển đổi từ km sang mét và từ mét sang km được thực hiện.

Khi chúng tôi nhập các giá trị bên trong bất kỳ hộp văn bản nào, bất kỳ giá trị nào được thay đổi, Watch sẽ chăm sóc cập nhật cả hai hộp văn bản. Chúng tôi không phải chỉ định đặc biệt bất kỳ sự kiện nào và đợi nó thay đổi và thực hiện thêm công việc xác thực. Watch chăm sóc cập nhật các hộp văn bản với phép tính được thực hiện trong các chức năng tương ứng.

Hãy xem kết quả đầu ra trong trình duyệt.

Hãy nhập một số giá trị vào hộp văn bản kilômét và xem nó thay đổi trong hộp văn bản mét và ngược lại.

Bây giờ, hãy nhập vào hộp văn bản mét và xem nó thay đổi trong hộp văn bản km. Đây là màn hình hiển thị trong trình duyệt.