Vue.js Computed PropertiesIn 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: 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: Example1Index.html file: Index.js file: Let's use a simple CSS file to make the output more attractive. Index.css file: After the execution of the program, you will see the following output: Output: ![]() Example explanationIn 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. Example 2Let'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: Index.js file: Let's use a simple CSS file to make the output more attractive. Index.css file: After the execution of the program, you will see the following output: Output: ![]() Example explanationIn 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. 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 propertyIn 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: Index.js file: Let's use a simple CSS file to make the output more attractive. Index.css file: After the execution of the program, you will see the following output: Output: ![]() Example ExplanationIn 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 PropertiesLet's see how to use get/set functions in Vue.js computed properties. See the following example: Index.html file: Index.js file: After the execution of the program, you will see the 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: See the following example: Index.html file: Index.js file: After the execution of the program, you will see the 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: ![]() Next TopicVue.js Watch Property
|
Python tutorial provides basic and advanced concepts of Python.
Vue.js is an open-source progressive JavaScript framework
HTML refers to Hypertext Markup Language. HTML is the gateway ...
Java is an object-oriented, class-based computer-programming language.
PHP is an open-source,interpreted scripting language.
Spring is a lightweight framework.Spring framework makes ...
JavaScript is an scripting language which is lightweight and cross-platform.
CSS refers to Cascading Style Sheets...
jQuery is a small and lightweight JavaScript library. jQuery ...
SQL is used to perform operations on the records stored in the database.
C programming is considered as the base for other programming languages.
JavaScript is an scripting language which is lightweight and cross-platform.
Vue.js is an open-source progressive JavaScript framework
ReactJS is a declarative, efficient, and flexible JavaScript library.
jQuery is a small and lightweight JavaScript library. jQuery ...
Node.js is a cross-platform environment and library for running JavaScript app...
TypeScript is a strongly typed superset of JavaScript which compiles to plain JavaScript.
Angular JS is an open source JavaScript framework by Google to build web app...
JSON is lightweight data-interchange format.
AJAX is an acronym for Asynchronous JavaScript and XML.
ES6 or ECMAScript 6 is a scripting language specification ...
Angular 7 is completely based on components.
jQuery UI is a set of user interface interactions built on jQuery...
Python tutorial provides basic and advanced concepts of Python.
Java is an object-oriented, class-based computer-programming language.
Node.js is a cross-platform environment and library for running JavaScript app...
PHP is an open-source,interpreted scripting language.
Go is a programming language which is developed by Google...
C programming is considered as the base for other programming languages.
C++ is an object-oriented programming language. It is an extension to C programming.
C# is a programming language of .Net Framework.
Ruby is an open-source and fully object-oriented programming language.
JSP technology is used to create web application just like Servlet technology.
The JSTL represents a set of tags to simplify the JSP development.
ASP.NET is a web framework designed and developed by Microsoft.
Perl is a cross-platform environment and library for running JavaScript...
Scala is an object-oriented and functional programming language.
VBA stands for Visual Basic for Applications.
Spring is a lightweight framework.Spring framework makes ...
Spring Boot is a Spring module that provides the RAD feature...
Django is a Web Application Framework which is used to develop web applications.
Servlet technology is robust and scalable because of java language.
The Struts 2 framework is used to develop MVC based web applications.
Hibernate is an open source, lightweight, ORM tool.
Solr is a scalable, ready-to-deploy enterprise search engine.
SQL is used to perform operations on the records stored in the database.
MySQL is a relational database management system based...
Oracle is a relational database management system.
SQL Server is software developed by Microsoft.
PostgreSQL is an ORDBMS.
DB2 is a database server developed by IBM.
Redis is a No SQL database which works on the concept of key-value pair.
SQLite is embedded relational database management system.
MongoDB is a No SQL database. It is an document-oriented database...
Memcached is a free, distributed memory object caching system.
Hibernate is an open source, lightweight, ORM tool.
PL/SQL is a block structured language that can have multiple blocks in it.
DBMS Tutorial is software that is used to manage the database.
Spark is a unified analytics engine for large-scale data processing...
IntelliJ IDEA is an IDE for Java Developers which is developed by...
Git is a modern and widely used distributed version control system in the world.
GitHub is an immense platform for code hosting.
SVN is an open-source centralized version control system.
Maven is a powerful project management tool that is based on POM.
Jsoup is a java html parser.
UML is a general-purpose, graphical modeling language.
RESTful Web Services are REST Architecture based Web Services.
Postman is one testing tools which is used for API testing.
JMeter is to analyze the performance of web application.
Jenkins builds and tests our software projects.
SEO stands for Search Engine Optimization.
MATLAB is a software package for mathematical computation, visualization...
Unity is an engine for creating games on multiple platforms.
Hadoop is an open source framework.
Pig is a high-level data flow platform for executing Map Reduce programs of Hadoop.
Spark is a unified analytics engine for large-scale data processing...
Spring Cloud is a framework for building robust cloud applications.
Spring Boot is a Spring module that provides the RAD feature...
AI is one of the fascinating and universal fields of Computer.
Cloud computing is a virtualization-based technology.
AWS stands for Amazon Web Services which uses distributed IT...
Microsoft Azure is a cloud computing platform...
IoT stands for Internet of Things...
Spring Cloud is a framework for building robust cloud applications.
Email:jjw.quan@gmail.com