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 HTML5 tag is indicated to be used as container for menu with navigation links in Web site?
<section> <nav> <article>
<nav><ul>
 <li><a href="http://coursesweb.net/css/" title="CSS Course">CSS Course</a></li>
 <li><a href="http://www.marplo.net/jocuri/" title="Flash Games">Flash Games</a></li>
</ul></nav>
Which CSS property shifts an item horizontally to the left or right of where it was?
text-align clear float
.some_class {
  width: 30%;
  float: left;
}
Click on the Math object method which returns x, rounded downwards to the nearest integer.
Math.ceil(x) Math.abs(x) Math.floor(x)
var num = 12.34567;
num = Math.floor(num);
alert(num);       // 12
Indicate the PHP function which returns the number of characters in string.
mb_strlen() count() stristr()
$str = "string with utf-8 chars åèö";
$nrchr = mb_strlen($str);
echo $nrchr;        // 30
Computed Properties

Last accessed pages

  1. Display data from PHP Array, or MySQL in HTML table (17476)
  2. Add sounds and audio effects in Flash (2394)
  3. Convert XML to JSON in JavaScript (21863)
  4. Select in MySQL, Output results in HTML Table (10094)
  5. Get the value of the selected /checked checkboxes in a form (42000)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (1440)
  2. Contact page - CoursesWeb (1403)
  3. Tabs effect with CSS (1398)
  4. PHP getElementById and getElementsByTagName (659)
  5. Get Attribute (ID, Class, Name, Title, Src) with jQuery (537)