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

Implementation of Nginx domain name forwarding https access

A word in advance: Suddenly I received a task to ...

idea combines docker to realize image packaging and one-click deployment

1. Install Docker on the server yum install docke...

Tutorial on installing the latest MySQL 8.0.18 using a compressed package on Win10 64-bit (with pictures and text)

WIN10 64-bit install the latest MySQL8.0.18 downl...

Example of how to start a container with multiple network interfaces using docker

Adding a network interface to the container 1 Run...

Detailed graphic tutorial on silent installation of oracle12.2 on CentOS under VMware

Environmental preparation: VMware+CentOS, jdk 1. ...

Install Linux rhel7.3 operating system on virtual machine (specific steps)

Install virtualization software Before installing...

Detailed explanation of angular two-way binding

Table of contents Bidirectional binding principle...

Why Google and Facebook don't use Docker

The reason for writing this article is that I wan...

Basic use of javascript array includes and reduce

Table of contents Preface Array.prototype.include...

About front-end JavaScript ES6 details

Table of contents 1. Introduction 1.1 Babel Trans...

The difference between VOLUME and docker -v in Dockerfile

There are obvious differences between volume moun...

Independent implementation of nginx container configuration file

Create a container [root@server1 ~]# docker run -...

An example of implementing a simple finger click animation with CSS3 Animation

This article mainly introduces an example of impl...

Some tips on website design

In fact, we have been hearing a lot about web des...

Implementation of deploying Apollo configuration center using docker in CentOS7

Apollo open source address: https://github.com/ct...