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 type of <input> creates a date input control, such as a pop-up calendar?
type="text" type="date" type="button"<input type="date" name="set_date" value="2012-10-15" />
Which CSS property adds shadow effects to the text of an element?
font-style color text-shadowh2 {
text-shadow: 2px 3px 3px #a0a1fe;
}Click on the function that adds new elements to the end of an array.
pop() shift() push()var pags = ["lessons", "courses"];
pags.push("download", "tutorials");
alert(pags[2]); // downloadWhich function sorts an array by key, in ascending order, maintaining key to data correlations?
asort() ksort() sort()$lang =[10=>"PHP", 20=>"JavaScript", "site"=>"coursesweb.net");
ksort($lang);
var_export($lang); // array ("site"=>"coursesweb.net", 10=>"PHP", 20=>"JavaScript")