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

PHP scheduled backup MySQL and mysqldump syntax parameters detailed

First, let's introduce several common operati...

Detailed explanation of rpm installation in mysql

View installation and uninstallation # View rpm -...

Possible reasons why the input type="reset" tag in HTML is invalid (does not work).

When using the <html:reset> tag, sometimes w...

How to integrate the graphic verification code component into the Ant Design Pro login function

Preface: This article only introduces the steps t...

How to use IDEA to configure tomcat and create JSP files

Before using idea to write JSP files, you need to...

JavaScript to implement simple carousel chart most complete code analysis (ES5)

This article shares the specific code for JavaScr...

Teach you a trick to permanently solve the problem of MySQL inserting Chinese characters

Table of contents Preface first step: Step 2: Mod...

Implementation example of Nginx+Tomcat load balancing cluster

Table of contents introduction 1. Case Overview 2...

How to use CSS to pull down a small image to view a large image and information

Today I will talk about a CSS special effect of h...

Tutorial on installing Docker in Windows 10 subsystem Ubuntu (WSL) (with pictures and text)

Table of contents Environmental Description Insta...

Analysis of implicit bug in concurrent replication of MySQL 5.7

Preface Most of our MySQL online environments use...

Detailed steps to install MySQL 5.6 X64 version under Linux

environment: 1. CentOS6.5 X64 2.mysql-5.6.34-linu...

Example of how to implement value transfer between WeChat mini program pages

Passing values ​​between mini program pages Good ...

Calendar effect based on jQuery

This article example shares the specific code of ...

Docker uses the Prune command to clean up the none image

Table of contents The creation and confusion of n...