A watcher allows you to "watch" a property of the component data, and run a function when that property value changes.
In the watch object add a method with the same name as the property data you want to "watch".
Syntax:
var vm = new Vue({
el: 'css_selector',
data: {
prop_name: 'value'
}.
watch: {
prop_name: function(newVal, oldVal{
//code and value to return
}
}
});
The function assigned to watch.prop_name can optionally accept 2 parameters. The first is the new property value (newVal). The second is the old property value.
Here is a practical example with the watch property in vue.js. Add the diameter of a circle into an input field, then it is displayed the perimeter and area:
<div id='demo'>
Diameter circle: <input type='number' value='0' v-model='diameter'/><br>
Perimeter: {{perimeter}}<br>
Area: {{area}}
</div>
<script>
var vm = new Vue({
el:'#demo',
data: {
diameter: 0,
perimeter:0,
area:0
},
watch: {
diameter: function(val){
this.perimeter = 3.14*val;
this.area = 3.14*(val*val)/4;
}
}
});
</script>
Daily Test with Code Example
HTML
CSS
JavaScript
PHP-MySQL
Which attribute is used in <a> tag for the address of the link?
src href rel<a href="http://coursesweb.net/" title="CoursesWeb.net">CoursesWeb.net</a>
Which CSS property sets the type of the text font?
font-family text-decoration font-sizeh2 {
font-family:"Calibri",sans-serif;
}What instruction selects all the <div> tags with class="cls"?
querySelector("div.cls") getElementsByTagName("div") querySelectorAll("div.cls")var elm_list = document.querySelectorAll("div.cls");
var nr_elms = elm_list.length; // number of selected items
alert(nr_elms);Indicate the function that can be used to get the sum of values in an array.
array_sum() array_diff() array_shift()$arr =[1, 2, 3, 4);
$arr_sum = array_sum($arr);
echo $arr_sum; // 10