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
What attribute makes the input text box to not be modified by the user?
checked="checked" readonly="readonly" disabled="disabled"
<input type="text" value="fixed-value" readonly="readonly" name="a_name" />
What CSS property allows you to create rounded corners in your webpage design?
background-size border-size border-radius
.class {
  border:2px solid blue;
  border-radius:1.2em;
}
What instruction displays a confirmation dialog box to the viewer, who must then click OK or Cancel to proceed?
indexOf() confirm() prompt()
var ques = window.confirm("The result of 0+0 is 0?");
if (ques) alert("Corect");
else alert("Incorrect");
Indicate the PHP function that returns the lowest number of the parameter values.
floor() ceil() min()
$min_nr = min(12, 8, 25, 13);
echo $min_nr;        // 8
Computed Properties

Last accessed pages

  1. CSS Course - Free lessons (20471)
  2. Wake Up! (14391)
  3. JavaScript Course - Free lessons (29685)
  4. The Four Agreements (1040)
  5. PHP-MySQL free course, online tutorials PHP MySQL code (66106)

Popular pages this month

  1. PHP Unzipper - Extract Zip, Rar Archives (94)
  2. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (58)
  3. JavaScript Course - Free lessons (45)
  4. SHA1 Encrypt data in JavaScript (44)
  5. Read Excel file data in PHP - PhpExcelReader (38)