home PYTHONJAVA
 

Vue.js listener property

In this chapter, we will introduce you to the Vue.js listener property watch, and we can respond to data changes with watch.

The following example implements the counter by using watch:

Instance

<div id = "app"> <p style = "font-size:25px;">counter: {{ counter }}</p> <button @click = "counter++" style = "font-size:25px;">click me</button> </div> <script type = "text/javascript"> var vm = new Vue({ el: '#app', data: { counter: 1 } }); vm.$watch('counter', function(nval, oval) { alert('Counter value change :' + oval + ' Become ' + nval + '!'); }); </script>

The following example converts between km and meter:

Instance

<div id = "computed_props"> km : <input type = "text" v-model = "kilometers"> Meter : <input type = "text" v-model = "meters"> </div> <p id="info"></p> <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; } } }); // $watch Is an example method vm.$watch('kilometers', function (newValue, oldValue) { // This callback will be at vm.kilometers Called after change document.getElementById ("info").innerHTML = "The value before modification is: " + oldValue + ",The modified value is: " + newValue; }) </script>






welookups is optimized for learning.© welookups. 2018 - 2019 All Right Reserved and you agree to have read and accepted our term and condition.