Javatpoint Com Vue Js Computed Properties PDF

Home Java Vue.
js JavaScript HTML
Vue.js Computed Properties

In Vue.js, computed properties are used when we
have to handle complex logic and operations.
Computed properties are just like methods but with
some differences.
We have successfully used in-template expressions

in previous examples. They are very convenient, but
the in-template expressions are mainly used for
simple operations. If you have to put a heavy and
complex logic in your templates, it can be bloated
and hard to maintain.
For example:
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
Here you can see that the template is not as simple

and declarative as before. It looks more complex,
and you have to look at it for a second before
realizing that it displays the message in reverse. This
problem may get worse when you have to use the
reversed message in your template repeatedly.
Let's take some easy examples to make computed

properties concept clear and easy to understand.
This can also make you able to decide when to use
methods and when to use computed properties.
See the following examples to understand the

concept of computed properties:
Example1
Index.html file:
<html>
<head>
<title>Vue.js Computed Property</title>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vu
</script>
</head>
<body>
<div id="com_props">
This is the Original message:<h2> {{ message }}
</h2>
This is the Computed reversed message: <h2> {{ revers
</h2>
</div>
<script src="index.js"></script>
</body>
</html>
Index.js file:
var vm = new Vue({
el: '#com_props',
data: {
message: 'Hello JavaTpoint'
},
computed: {
// a computed getter
reversedMessage: function () {
// `this` points to the vm instance
return this.message.split('').reverse().join('')
})
Let's use a simple CSS file to make the output more

attractive.
Index.css file:
html, body {
margin: 5px;
padding: 0;
After the execution of the program, you will see the

following output:
Output:
Example explanation
In the above example, we have declared a computed

property reversedMessage. Here the provided
function is used as the getter function for the property
reversedMessage. The value of reversedMessage is
always dependent on the value of message property.
data: {
message: 'Hello JavaTpoint'
},
computed: {
// a computed getter
reversedMessage: function () {
Example 2
Let's take another example. In this example, you can

enter your data in a form structure and see the result
of computer property. See the following example:
Index.html file:
<html>
<head>
</script>
</head>
<body>
<div id = "com_props">
FirstName : <input type = "text" v-
model = "firstname" /> <br/><br/>
LastName : <input type = "text" v-
model<h2>My
= "lastname"/>
name is<br/><br/>
{{firstname}} {{lastname}}
</h2><h2>Retrieve name by using computed property : {
</h2>
</div>
</body>
</html>
Index.js file:
var vm = new Vue({
el: '#com_props',
data: {
firstname :"",
lastname :"",
birthyear : ""
},
computed :{
getfullname : function(){
return this.firstname +" "+ this.lastname;
})

attractive.
Index.css file:
html, body {
margin: 5px;
padding: 0;

following output:
Output:
Example explanation
In the above example, we have created two

textboxes named Firstname and Lastname. These
textboxes are bound using properties firstname and
lastname.
Now, we have called computed method getfullname,

which returns the firstname and the lastname
entered.
computed :{
getfullname : function(){
return this.firstname +" "+ this.lastname;
When we type in the textbox, the function returns the

same after the changes in properties' firstname or
lastname. Thus, with the help of computed we don't
have to do anything specific, such as remembering to
call a function. With computed property, it gets called
by itself as the properties used inside changes, i.e.
firstname and lastname.
Difference between a method and a

computed property
In the above examples, we have learned about

computed properties. Now, let's learn about the
difference between a method and a computed
property. We know that both are objects, and there
are functions defined inside, which returns a value.
In the case of computed properties, we call it a

property while we call it a function in the case of
method. Let's see an example to understand the
difference between method and computed property.
Index.html file:
<html>
<head>
</script>
</head>
<body>
<h2 style = "background-
color:gray;">Random No from computed property: {{get
</h2>
<h2>Random No from method: {{getrandomno1()}
</h2><h2 style = "background-
</h2>
<h2 style = "background-
</h2><h2>Random No from method: {{getrandomno1()}
</h2>
</div>
</body>
</html>
Index.js file:
var vm = new Vue({
el: '#com_props',
data: {
name : "helloworld"
},
methods: {
getrandomno1 : function() {
return Math.random();
},
computed :{
getrandomno : function(){
return Math.random();
})

attractive.
Index.css file:
html, body {
margin: 5px;
padding: 0;

following output:
Output:
Example Explanation
In the above example, we have created a method

named getrandomno1 and a computed property
with a function name getrandomno. In this example,
we are using Math.random() to get back result in the
form of random numbers. We have called the method
and computed property many times to see the
difference.
Here, you can see that the random numbers returned

from the computed property remain the same every
time irrespective of the number of times it is called.
This means every time it is called; the last value is
updated for all. On the other hand, for a method, it is
a function, so it returns a different value every time it
is called.
Get/Set in Vue.js Computed Properties
Let's see how to use get/set functions in Vue.js

computed properties. See the following example:
Index.html file:
<html>
<head>
</script>
</head>
<body>
<input type = "text" v-model = "fullname" />
<h1>{{firstName}}</h1>
<h1>{{lastName}}</h1>
</div>
</body>
</html>
Index.js file:
var vm = new Vue({
el: '#com_props',
data: {
firstName : "Alex",
lastName : "Junior"
},
methods: {
},
computed :{
fullname : {
get : function() {
return this.firstName+" "+this.lastName;
})

following output:
Output:
In the above example, we have defined a computed

property input box that is bound to fullname. It returns
a function called get and gives the fullname as
output, i.e., the first name and the last name.
Now, you can see that if you change the name in the
textbox, the result is not reflected in the output. See
the following image.
Output:
To resolve this issue, we have to add the setter

function in the fullname computed property.
Add the following set function in the fullname

computed property:
computed :{
fullname : {
get : function() {
},
set : function(name) {
var fname = name.split(" ");
this.firstName = fname[0];
this.lastName = fname[1]
See the following example:
Index.html file:
<html>
<head>
</script>
</head>
<body>
<input type = "text" v-model = "fullname" />
</div>
</body>
</html>
Index.js file:
var vm = new Vue({
el: '#com_props',
data: {
firstName : "Alex",
lastName : "Junior"
},
methods: {
},
computed :{
fullname : {
get : function() {
},
set : function(name) {
var fname = name.split(" ");
this.firstName = fname[0];
this.lastName = fname[1]
});

following output:
Output:
Now, if you edit the textbox after running the code,

the updated name will be displayed in the browser.
The firstname and the lastname are updated here
because of the set function. The get function returns
the firstname and lastname, while the set function
updates it if you edit anything in the textbox.
See the output after editing.
Output:
← prev next →
For Videos Join Our Youtube

Channel: Join Now
Help Others, Please Share
Learn Latest Tutorials
Solr MongoDB
Gimp Verilog
Teradata PhoneGap
Gmail Vue.js
PLC Illustrator
Postman
Preparation
Aptitude Reasoning
Verbal A. Interview
Company
Trending Technologies
AI AWS
Selenium Cloud
Hadoop ReactJS
D. Science Angular 7
Blockchain Git
ML DevOps
B.Tech / MCA
DBMS DS
DAA OS
C. Network Compiler D.
COA D. Math.
E. Hacking C. Graphics
Software E. Web Tech.
Cyber Sec. Automata
C C++
Java .Net
Python Programs
Control S. Data Mining

Javatpoint Com Vue Js Computed Properties PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Javatpoint Com Vue Js Computed Properties PDF

Uploaded by

Copyright:

Available Formats

Home Java Vue.

Vue.js Computed Properties

We have successfully used in-template expressions

Here you can see that the template is not as simple

Let's take some easy examples to make computed

See the following examples to understand the

<title>Vue.js Computed Property</title>

<link rel="stylesheet" href="index.css">

This is the Original message:<h2> {{ message }}

var vm = new Vue({

message: 'Hello JavaTpoint'

// `this` points to the vm instance

Let's use a simple CSS file to make the output more

After the execution of the program, you will see the

In the above example, we have declared a computed

message: 'Hello JavaTpoint'

Let's take another example. In this example, you can

<title>Vue.js Computed Property</title>

<link rel="stylesheet" href="index.css">

FirstName : <input type = "text" v-

model = "firstname" /> <br/><br/>

LastName : <input type = "text" v-

</h2><h2>Retrieve name by using computed property : {

var vm = new Vue({

return this.firstname +" "+ this.lastname;

Let's use a simple CSS file to make the output more

After the execution of the program, you will see the

In the above example, we have created two

Now, we have called computed method getfullname,

return this.firstname +" "+ this.lastname;

When we type in the textbox, the function returns the

Difference between a method and a

In the above examples, we have learned about

In the case of computed properties, we call it a

<title>Vue.js Computed Property</title>

<link rel="stylesheet" href="index.css">

<h2 style = "background-

color:gray;">Random No from computed property: {{get

<h2>Random No from method: {{getrandomno1()}

</h2><h2 style = "background-

color:gray;">Random No from computed property: {{get

<h2 style = "background-

color:gray;">Random No from computed property: {{get

</h2><h2>Random No from method: {{getrandomno1()}

var vm = new Vue({

Let's use a simple CSS file to make the output more

After the execution of the program, you will see the

In the above example, we have created a method

Here, you can see that the random numbers returned

Get/Set in Vue.js Computed Properties

Let's see how to use get/set functions in Vue.js

<title>Vue.js Computed Property</title>

<link rel="stylesheet" href="index.css">

<input type = "text" v-model = "fullname" />

var vm = new Vue({

return this.firstName+" "+this.lastName;

After the execution of the program, you will see the

In the above example, we have defined a computed

To resolve this issue, we have to add the setter

Add the following set function in the fullname

return this.firstName+" "+this.lastName;

var fname = name.split(" ");

See the following example: