Vue monitoring properties and calculated properties

Vue monitoring properties and calculated properties

1. watch monitoring properties

This property is used to monitor changes in certain data and trigger the execution of the corresponding callback function.

Basic usage: add watch attribute with a value of an object. The attribute name of the object is the data to be monitored, and the attribute value is the callback function. Whenever the value corresponding to this attribute name changes, the callback function will be triggered to execute.

The callback function has 2 parameters:

  • newVal : the value after the data is changed.
  • oldVal : the value before the data is changed.

counter:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <script src="./js/vue.js"></script>
 </head>
 <body>
  <div id="app">
   <div>Counter {{ shu }}</div>
   <span>Before change: {{ov}}</span>
   <span>After change: {{nv}}</span>
   <br />
   <button @click="shu++">Add one</button>
  </div>
  
  <script>
  var vm = new Vue({
   el: '#app',
   data: {
    Shu:1,
    ov:0,
    nv:0
   },
   methods:{
    
   }
  })
  vm.$watch("shu",function(nval,oval){
   vm.$data.ov = oval
   vm.$data.nv = nval
  })
  </script>
 </body>
</html>

Add a listener and assign the value of the counter before it changes to the variable ov and the value after it changes to the variable nv

  vm.$watch("shu",function(nval,oval){
   vm.$data.ov = oval
   vm.$data.nv = nval
  })

1.

1. Shopping cart

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <script src="./js/vue.js"></script>
 </head>
 <body>
  <div id="app">
  <table>
   <tr>
    <th>Serial number</th>
    <th>Product Name</th>
    <th>Product price</th>
    <th>Purchase quantity</th>
    <th>Operation</th>
   </tr>
   <tr v-for="sp in sps">
    <td>{{ sp.id }}</td>
    <td>{{ sp.name }}</td>
    <td>{{ sp.money }}</td>
    <td>
    <button v-on:click="sp.sum=sp.sum-1">-</button>
    {{ sp.sum }}
    <button v-on:click="sp.sum=sp.sum+1">+</button>
    </td>
    <td>
     <button v-on:click="sp.sum=0">Reset</button>
    </td>
   </tr>
  </table>
  <div >
   Total price: {{ getmany() }}
  </div>
  </div>
  <script>
   var vm = new Vue({
    el: '#app',
    data: {
     sps:[
      {
       id:1,
       name:"Apple 13",
       money:6000,
       sum:1
      },
      {
       id:2,
       name:"Apple 12",
       money:5000,
       sum:1
      },
      {
       id:3,
       name:"Apple 11",
       money:4000,
       sum:1
      }
     ]
    },
    methods:{
     getmaney:function(){
      var m=0;
      for(var x=0;x<this.sps.length;x++){
       m=m+this.sps[x].money*this.sps[x].sum;
      }
      return m;
     }
    }
   })
  </script>
 </body>
</html>

The total cost is:

getmaney:function(){
    var m=0;
    for(var x=0;x<this.sps.length;x++){
   m=m+this.sps[x].money*this.sps[x].sum;
 }
 return m;
}

2. Select all and deselect all

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <script src="./js/vue.js"></script>
 </head>
 <body>
  <div id="app">
   <input type="checkbox" id="a" value="a" v-model="che"/>
   <label for="a">a</label>
   <input type="checkbox" id="b" value="b" v-model="che"/>
   <label for="b">b</label>
   <input type="checkbox" v-model="checked" id="bok" v-on:change="ckall()" />
   <label for="box">Select All</label>
  </div>
  <script>
   var vm = new Vue({
    el: '#app',
    data: {
     checked:false,
     che:[],
     shuzu:["a","b"]
    },
    methods:{
     ckall:function(){
      //Select all status if(this.checked){
       this.che = this.shuzu
      }else{
       //Cancel all selections this.che=[]
      }
     }
    },
    watch:{
     "che":function(){
      //Judge whether to select all if(this.che.length == this.shuzu.length){
       this.checked = true
      }else{
       this.checked = false
      }
     }
    }
   })
  </script>
 </body>
</html>

2. Calculated properties

1.computed

Features:

  • Define the method for calculating the property in the computed property object, and use {{method name}} on the page to display the calculation result.
  • Display and monitor property data through getter/setter .
  • Computed properties are cached, and getter is executed only once for multiple reads.
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <script src="./js/vue.js"></script>
 </head>
 <body>
  <div id="app">
   <p>{{ mess }}</p>
   <p>{{ remess }}</p>
   <p>{{ mess.split('').reverse().join('') }}</p>
  </div>
  <script>
   var vm = new Vue({
    el: '#app',
    data:{
     mess:'abcd'
    },
    computed: {
     remess:function(){
      return this.mess.split('').reverse().join('')
     }
    }
   })
  </script>
 </body>
</html>

2.methods

computed is based on its dependency cache and will only be re-valued when the relevant dependencies change. With methods , the function will always be called again when re-rendering.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <script src="./js/vue.js"></script>
 </head>
 <body>
  <div id="app">
   <input v-model="mess" />
   <p>{{ mess }}</p>
   <p>{{ remess }}</p>
   <p>{{ remess2() }}</p>
  </div>
  <script>
   var vm = new Vue({
    el: '#app',
    data:{
     mess:'abcd'
    },
    computed: {
     remess:function(){
      return this.mess.split('').reverse().join('')
     }
    },
    methods: {
     remess2:function(){
      return this.mess.split('').reverse().join('')
     }
    }
   })
  </script>
 </body>
</html>

3. Setters

When the page obtains certain data, it will first look in the data. If it cannot find the data, it will look in the calculated attribute. When obtaining data in the calculated attribute, the get method will be automatically executed, and a set method is also provided. computed properties have only getter by default, but you can also provide a setter if needed.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <script src="./js/vue.js"></script>
 </head>
 <body>
  <div id="app">
   <p>{{ site }}</p>
  </div>
  <script>
   var vm = new Vue({
    el: '#app',
    data: {
     name: 'xiaowang',
     cls:'01'
    },
    computed:{
     site:{
      get: function(){
       return this.name+' '+this.cls
      },
      set: function(Value){
       var names = Value.split('|')
       this.name = names[0]
       this.cls = names[1]
      }
     }
    }
   })
   vm.site = 'xiaowang|01';
   document.write('name:'+vm.name);
   document.write('<br>');
   document.write('class:'+vm.cls);
  </script>
 </body>
</html>

This is the end of this article about Vue listening properties and calculated properties. For more relevant Vue listening and calculated properties content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Vue calculated property implementation transcript
  • 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
  • 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

<<:  Enter the style file for the automatic search suggestion function: suggestion.css

>>:  CSS achieves the effect of two elements blending (sticky effect)

Recommend

JavaScript implements large file upload processing

Many times when we process file uploads, such as ...

Vue.js framework implements shopping cart function

This article shares the specific code of Vue.js f...

Detailed explanation of the role of key in React

Table of contents Question: When the button is cl...

Solutions to the Problem of Creating XHTML and CSS Web Pages

The solutions to the problems encountered during x...

A brief talk about MySQL pivot tables

I have a product parts table like this: part part...

Linux user script creation/guessing game/network card traffic monitoring introduction

Table of contents 1. User created script 2. Word ...

A thorough analysis of HTML special characters

A Thorough Analysis of HTML (14) Special Characte...

How to recover accidentally deleted messages files in Linux

If there are files that are being used by a proce...

Implementing license plate input function in WeChat applet

Table of contents Preface background Big guess Fi...

Ajax solves cross-domain problem by setting CORS response header to achieve cross-domain case study

1. Set CORS response header to achieve cross-doma...

Summary of 3 minor errors encountered during MySQL 8.0 installation

Preface In the past, the company used the 5.7 ser...

4 ways to achieve a two-column layout with fixed left column and adaptive right column using CSS

1. float+overflow:hidden This method mainly trigg...

Summary of common sql statements in Mysql

1. mysql export file: SELECT `pe2e_user_to_compan...

Two ways to implement text stroke in CSS3 (summary)

question Recently I encountered a requirement to ...

Summary of common commands for building ZooKeeper3.4 middleware under centos7

1. Download and decompress 1. Introduction to Zoo...