Vuejs Course


Computed properties are like methods but with some difference in comparison to methods. Computed properties are defined in the computed object, they are usualy used to automatically update some properties or template structures when other template data is changed.

Syntax:
var vm = new Vue({
//...
 computed: {
 prop_name: function(){
 //code and value to return
 }
 }
});

Here is an example, the text added into an input field will change the value of the {{msg}} template. Now, with the definition of a computed property (here reversedMsg), when data for {{msg}} changes the vm.reversedMsg is automatically updated and returns the text in reverse order.
<div id='example'>
 Add some text: <input type='text' v-model='msg'/>
 <p>Messag: {{msg}}</p>
 <p>Computed reversed message: "{{ reversedMsg }}".</p>
</div>

<script>
var vm = new Vue({
 el: '#example',
 data: {
 msg: 'Hello'
 },
 computed: {
 // a computed getter
 reversedMsg: function(){
 // `this` points to the vm instance
 return this.msg.split('').reverse().join('')
 }
 }
});
</script>
The computed function from reversedMsg is used as the getter function for the property vm.reversedMsg.
Vue is aware that vm.reversedMsg depends on vm.msg, so it will update any bindings that depend on vm.reversedMsg when vm.msg changes, like you can see again in the following example.
var vm = new Vue({
 data: {
 msg: 'Hello'
 },
 computed: {
 // a computed getter
 reversedMsg: function(){
 // `this` points to the vm instance
 return this.msg.split('').reverse().join('')
 }
 }
});

console.log(vm.reversedMsg) // olleH
vm.msg = 'Goodbye';
console.log(vm.reversedMsg) // eybdooG
Computed properties are cached based on their reactive dependencies. A computed property will only re-evaluate when some of its dependencies have changed.
As long as vm.msg has not changed, multiple access to the vm.reversedMsg computed property will immediately return the previously computed result without having to run the function again.

Computed Setter and Getter

Computed properties are by default getter-only (used to get a value), but you can also provide a setter when you need it. In this case the syntax is:
var vm = new Vue({
//...
 computed: {
 prop_name: {
 get: function(){
 //code for getter
 },
 set: function(){
 //code for setter
 }
 }
 }
});

Here is an example:
<div id='demo'>
 Full Name: <input type = 'text' v-model='fullname' /><br><br>
 First Name: {{first_name}}<br>
 Last Name: {{last_name}}
</div>

<script>
var vm = new Vue({
 el: '#demo',
 data: {
 first_name :'Mar',
 last_name : 'Plo'
 },
 computed :{
 fullname : {
 get : function(){
 return this.first_name+' '+this.last_name;
 },
 set : function(name){
 var fname = name.split(' ');
 this.first_name = fname[0];
 this.last_name = fname[1]
 }
 }
 }
});
</script>
When we run the code and edit the text box, the first_name and the last_name will be updated because of the set function.
The get function returns the first_name and last_name, while the set function updates it, if anything is edited.

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag adds an image in web page?
<div> <img> <span>
<img src="http://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="Courses-Web" />
Which of these CSS codes displays the text oblique?
font-style: italic; text-decoration: underline; font-weight: 500;
#id {
  font-style: italic;
}
Click on the jQuery function used to hide with animation a HTML element.
click() hide() show()
$(document).ready(function() {
  $(".a_class").click(function(){ $(this).hide("slow"); });
});
Click on the correctly defined function in PHP.
fname function() {} function fname() {} function $fname() {};
function fname($a, $b) {
  echo $a * $b;
}
Computed Properties

Last accessed pages

  1. Add Tag to Selected Text in textarea with JavaScript (2132)
  2. Moving html element to a random direction (1073)
  3. Basic HTML elements (4409)
  4. Volume and Surface Area Calculator for 3D objects (9381)
  5. EasyPhpThumbnail Class (1485)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (630)
  2. Read Excel file data in PHP - PhpExcelReader (420)
  3. PHP-MySQL free course, online tutorials PHP MySQL code (378)
  4. querySelector and querySelectorAll (368)
  5. Create simple Website with PHP (358)