VueJS - ดูทรัพย์สิน

ในบทนี้เราจะเรียนรู้เกี่ยวกับคุณสมบัติ Watch จากตัวอย่างเราจะเห็นว่าเราสามารถใช้คุณสมบัติ Watch ใน VueJS ได้

ตัวอย่าง

<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. ในทั้งสองฟังก์ชั่นการแปลงจากกิโลเมตรเป็นเมตรและจากเมตรเป็นกิโลเมตรเสร็จสิ้น

เมื่อเราป้อนค่าภายในเท็กซ์บ็อกซ์ไม่ว่าจะเปลี่ยนแปลงอะไรก็ตาม Watch จะดูแลการอัปเดตทั้งกล่องข้อความ เราไม่จำเป็นต้องกำหนดเหตุการณ์ใด ๆ เป็นพิเศษและรอให้มันเปลี่ยนแปลงและทำงานพิเศษในการตรวจสอบความถูกต้อง Watch ดูแลการอัปเดตกล่องข้อความด้วยการคำนวณที่ทำในฟังก์ชันที่เกี่ยวข้อง

มาดูผลลัพธ์ในเบราว์เซอร์กัน

ลองป้อนค่าบางอย่างในกล่องข้อความกิโลเมตรและดูการเปลี่ยนแปลงในกล่องข้อความเมตรและในทางกลับกัน

ตอนนี้ให้ป้อนในกล่องข้อความเมตรและดูว่ามันเปลี่ยนไปในกล่องข้อความกิโลเมตร นี่คือการแสดงผลที่เห็นในเบราว์เซอร์