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

Application of CSS3 animation effects in activity pages

background Before we know it, a busy year is comi...

How to install redis in Docke

1. Search for redis image docker search redis 2. ...

Solution to MySQL startup successfully but not listening to the port

Problem Description MySQL is started successfully...

Detailed explanation of the difference between flex and inline-flex in CSS

inline-flex is the same as inline-block. It is a ...

Docker installation of MySQL (8 and 5.7)

This article will introduce how to use Docker to ...

HTML hyperlink style (four different states) setting example

Copy code The code is as follows: <style type=...

How to install grafana and add influxdb monitoring under Linux

Install grafana. The official website provides an...

Detailed graphic explanation of Mysql5.7.18 installation and master-slave replication

Install mysql5.7.18 on CentOS6.7 1. Unzip to the ...

WeChat Mini Program QR Code Generation Tool weapp-qrcode Detailed Explanation

WeChat Mini Program - QR Code Generator Download:...

Solution to the gap between divs

When you use HTML div blocks and the middle of th...

What does the n after int(n) in MySQL mean?

You may already know that the length 1 of int(1) ...

Front-end advanced teaching you to use javascript storage function

Table of contents Preface Background Implementati...

Implement MaterialUI button click animation based on CSS and encapsulate it into a React component

Preface As a heavy user of front-end frameworks, ...

Detailed explanation of MySQL database isolation level and MVCC

Table of contents 1. Isolation Level READ UNCOMMI...

Nginx stream configuration proxy (Nginx TCP/UDP load balancing)

Prelude We all know that nginx is an excellent re...