YouTip

Beginner Tutorial -- Learning is not just technology, but also dreams! Home HTML JAVASCRIPT CSS VUE REACT PYTHON3 JAVA C C++ C# AI GO SQL LINUX VS CODE BOOTSTRAP GIT Local Bookmark Vue.js Tutorial Vue.js Tutorial Vue.js Installation Vue.js Directory Structure Vue.js Getting Started Vue.js Template Syntax Vue.js Conditional Statements Vue.js Loop Statements Vue.js Computed Properties Vue.js Watch Vue.js Style Binding Vue.js Event Handlers Vue.js Forms Vue.js Components Vue.js Components - Custom Events Vue.js Custom Directives Vue.js Routing Vue.js Transitions & Animation Vue.js Mixins Vue.js Ajax(axios) Vue.js Ajax(vue-resource) Vue.js Responsive Interface Vue.js Examples Vue.js Computed Properties Vue.js Style Binding Vue.js Watch In this chapter, we will introduce Vue.js watch property. We can use watch to respond to data changes. The following example implements a counter using watch: Instance var vm = new Vue({ el: '#app', data: { counter: 1 } }); vm.$watch('counter', function(nval, oval) { alert('Countervalue changes :' + oval + ' changes to ' + nval + '!'); }); Try it Yourself » The following example converts between kilometers and meters: Instance

var vm = new Vue({ el: '#computed_props', data: { kilometers : 0, meters:0 }, methods: { }, computed :{ }, watch : { kilometers:function(val) { this.kilometers = val; this.meters = this.kilometers * 1000 }, meters : function (val) { this.kilometers = val/ 1000; this.meters = val; } } }); // $watch is an instance method vm.$watch('kilometers', function (newValue, oldValue) { // This callback will be called on the vm.kilometers Called after change document.getElementById ("info").innerHTML = "Value before modification is: " + oldValue + "，Value after modification is: " + newValue; }) Try it Yourself » Click the "Try it Yourself" button to view online examples In the above code, we created two input boxes. In the data property, the initial values of kilometers and meters are both 0. The watch object creates two monitoring methods for the data object: kilometers and meters. When we enter data in the input boxes, watch will listen for data changes in real-time and change its own value. You can see the following video demonstration: Vue.js Computed Properties Vue.js Style Binding ByteArk Coding Plan Support for Doubao, GLM, DeepSeek, Kimi, MiniMax and other mainstream large models, official direct supply stable and reliable. Configuration Guide ¥9.9 / month Subscribe Now iFlytek Xingchen Coding Plan Includes free model call quota, DeepSeek, GLM, Kimi, MiniMax, one-stop experience and deployment platform. Configuration Guide ¥3.9 / month Subscribe Now 4 Notes Write Notes Category Navigation Python / Data Science AI / Intelligent Development Frontend Development Backend Development Database Mobile Development DevOps / Engineering Programming Languages Computer Basics XML / Web Service .NET Website Building Advertisement Vue.js Tutorial Vue.js Tutorial Vue.js Installation Vue.js Directory Structure Vue.js Getting Started Vue.js Template Syntax Vue.js Conditional Statements Vue.js Loop Statements Vue.js Computed Properties Vue.js Watch Vue.js Style Binding Vue.js Event Handlers Vue.js Forms Vue.js Components Vue.js Components - Custom Events Vue.js Custom Directives Vue.js Routing Vue.js Transitions & Animation Vue.js Mixins Vue.js Ajax(axios) Vue.js Ajax(vue-resource) Vue.js Responsive Interface Vue.js Examples Online Examples ·HTML Examples ·CSS Examples ·JavaScript Examples ·Ajax Examples ·jQuery Examples ·XML Examples ·Java Examples Character Set & Tools · HTML Character Set · HTML ASCII Character Set · JS Obfuscator/Encryptor · PNG/JPEG Image Compressor · HTML Color Picker · JSON Formatter · Random Number Generator Latest Updates · AI Agent · AI Evaluation and Security Research · AI System Architecture · Frontier Research Dynamics · NLP Advanced Technology · Computer Vision AI · Deep Learning Fundamentals Site Information · Feedback · Disclaimer · About Us · Article Archive Follow WeChat My Favorites Mark Article Browsing History Clear All No Records