Vue calculated property implementation transcript

Vue calculated property implementation transcript

This article shares the Vue calculation property implementation report card for your reference. The specific content is as follows

The code is as follows:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Transcript Statistics</title>
  <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
  <style type="text/css">
   .gridtable{
    font-family:verdana, arial, sans-serif;
    font-size:11px;
    color:#333333;
    border-width: 1px;
    border-color:#666666;
    border-collapse: collapse;
   }
   .gridtable th{
    border-width: 1px;
    padding:8px;
    border-style:solid;
    border-color:#666666;
    background-color: #dedede;
   }
   .gridtable td{
    border-width: 1px;
    padding:8px;
    border-style:solid;
    border-color:#666666;
    background-color: #ffffff;
   }
  </style>
 </head>
 <body>
  
  <div id="app">
   <table class="gridtable">
    <tr>
     <th>Subject</th>
     <th>score</th>
    </tr>
    <tr>
     <td>Language</td>
     <td>
      <input type="text" name="" id="" value="" v-model.number="Chinese" />
     </td>
    </tr>
    <tr>
     <td>Mathematics</td>
     <td>
      <input type="text" name="" id="" value="" v-model.number="Math" />
     </td>
    </tr>
    <tr>
     <td>English</td>
     <td>
      <input type="text" name="" id="" value="" v-model.number="English" />
     </td>
    </tr>
    <tr>
     <td>Total score</td>
     <td>
      <input type="text" name="" id="" value="" v-model.number="sum" />
     </td>
    </tr>
    <tr>
     <td>Average score</td>
     <td>
      <input type="text" name="" id="" value="" v-model.number="average" />
     </td>
    </tr>
   </table>
  </div>
  
  <script>
   var vm = new Vue({
    el:"#app",
    data:{
     English:100,
     Math:100,
     English:60
    },
    computed:{
     sum:function(){
      return this.Chinese+this.Math+this.English;
     },
     average:function(){
      return Math.round(this.sum/3);
     }
    },
    
   })
  </script>
 </body>
</html>

When I change the scores of Chinese, mathematics, and English, the total score and average score will change in real time. This is the characteristic of Vue's calculated properties.

Vue computed property parameter passing

A calculated property is essentially a method, but is usually used as a property, usually without (). However, in actual development, if you need to pass parameters to the method in the calculated attribute, you need to use the closure parameter passing method.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Evaluate</title>
  <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
  <div id="app">
   {{add(2)}}
  </div>
  
  <script type="text/javascript">
   var vm = new Vue({
    el:"#app",
    data:{
     number:1
    },
    computed:{
     add(){
      return function(index){
       return this.number+index;
      }
     }
    }
   })
  </script>
 </head>
 <body>
 </body>
</html>

Notice:

  • The calculated property itself cannot fill in the parameters in the brackets like the method to achieve the purpose of parameter passing. The real method needs to be written in the method body to accept the parameters.
  • Similarly, the body parameters of the calculated attribute method can be omitted, that is, in this example, both add(){} and add(index){} are acceptable.

Computed property getters and setters

Computed properties are usually used to obtain data (change according to changes in data), so they only have getters by default, but Vue.js also provides setter functions when necessary. The order of the set method and the get method is independent of each other, and the parameter accepted by the set method is the return value of the get method.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>Computed</title>
  <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
  
  <div id="app">
   firstName:<input type="text" name="" id="" value="" v-model="first"/>
   lastName:<input type="text" name="" id="" value="" v-model="last"/>
   <p>fullName:<input type="text" name="" id="" value="" v-model="fullName"/></p>
  </div>
  <script type="text/javascript">
   var vm = new Vue({
    el:"#app",
    data:{
     first:"Jack",
     last:"Jones"
    },
    computed:{
     fullName:
      get:function(){
       return this.first+" "+this.last
      },
      set:function(parameter){
       var names = parameter.split(" ")
       this.first = names[0]
       this.last = names[names.length-1]
      }
     }
    }
   })
  </script>
 </body>
</html>

The difference between computed properties and methods

This approach of using computed properties ensures that code is only executed when necessary, making it suitable for handling potentially resource-intensive work. However, if the project does not have caching capabilities, methods should be used, depending on the actual situation.

The characteristics of calculated properties are as follows:

①When the dependency of a calculated property changes, the calculation will be performed immediately and the calculation result will be automatically updated.
②The evaluation results of the calculated properties will be cached for direct use next time.
③Calculated properties are suitable for executing more complex expressions, which are often too long or need to be repeated frequently, so they cannot be used directly in templates.
④Computed properties are an extended and enhanced version of the data object.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • A brief talk about calculated properties and property listening in Vue
  • Vue computed properties
  • Introduction to Computed Properties in Vue
  • Vue uses calculated properties to complete the production of dynamic sliders
  • Vue monitoring properties and calculated properties
  • Computed properties and data acquisition methods in Vue
  • Do you know Vue's computed properties?
  • Three implementation methods of Vue's calculated property name case

<<:  Detailed explanation of the implementation steps of MySQL dual-machine hot standby and load balancing

>>:  Detailed code for building a multi-person video chat service based on webrtc on Ubuntu

Recommend

Detailed explanation of the basic use of centos7 firewall in linux

1. Basic use of firewalld start up: systemctl sta...

Autotrash tool for Linux to automatically delete old junk files at a scheduled time

Autotrash is a command line program that automate...

Analysis and practice of React server-side rendering principle

Most people have heard of the concept of server-s...

Let's talk about MySQL joint query in detail

Table of contents Union query 1. Query the ID and...

Website redesign is a difficult task for every family

<br />Every family has its own problems, and...

Difference between MySQL btree index and hash index

In MySQL, most indexes (such as PRIMARY KEY, UNIQ...

MySQL Optimization: Cache Optimization

I am happy that some bloggers marked my article. ...

How to elegantly back up MySQL account information

Preface: I recently encountered the problem of in...

Docker container source code deployment httpd use storage volume to deploy the website (recommended)

Table of contents Deploy httpd with docker contai...

js native carousel plug-in production

This article shares the specific code for the js ...

Detailed graphic and text instructions for installing MySQL 5.7.20 on Mac OS

Installing MySQL 5.7 from TAR.GZ on Mac OS X Comp...

An article tells you how to implement Vue front-end paging and back-end paging

Table of contents 1: Front-end handwritten paging...

Detailed explanation of the best configuration for Nginx to improve security and performance

It mainly shows how to configure X-Frame-Options,...

How to use negative margin technology to achieve average layout in CSS

We usually use float layout to solve the compatib...

Master the commonly used HTML tags for quoting content in web pages

Use blockquote for long citations, q for short ci...