Vue monitoring properties and calculated properties

1. watch monitoring properties

1. Shopping cart
2. Select all and deselect all

2. Calculated properties

1.computed
2.methods
3. Setters

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. 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: