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 tag is used to include external CSS file in web page?
<body> <script> <link><link href="/templ/style.css" rel="stylesheet" type="text/css" />
Which CSS property sets the text size?
font-weight text-decoration font-sizeh2 {
font-size: 1em;
}Indicate the JavaScript property that can add HTML code into an element.
text value innerHTMLdocument.getElementById("someID").innerHTML = "HTML content";Click on the function that returns the number of characters of a string in PHP.
count() strlen() stristr()$str = "http://CoursesWeb.net/";
$nr_chr = strlen($str);
echo $nr_chr; // 22