Vue监听属性和计算属性怎么使用

这篇文章主要讲解了"Vue监听属性和计算属性怎么使用"，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习"Vue监听属性和计算属性怎么使用"吧！

一、watch监听属性

这个属性用来监视某个数据的变化，并触发相应的回调函数执行。

基本用法添加watch属性，值为一个对象。对象的属性名就是要监视的数据，属性值为回调函数，每当这个属性名对应的值发生变化，就会触发该回调函数执行。

回调函数有2个参数：

• newVal，数据发生改变后的值。

• oldVal，数据发生改变前的值。

计数器：

           
   
计数器{{ shu }}
   改变前: {{ov}}   改变后: {{nv}}   
   加一  
     

添加监听，同时将计数器改变前的值赋值给变量ov，将改变后的值赋值给变量nv

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

1.

1.购物车

           
  
   
    
序号
    
商品名称
    
商品价格
    
购买数量
    
操作
   
   
    
{{ sp.id }}
    
{{ sp.name }}
    
{{ sp.money }}
    
    -    {{ sp.sum }}    +    
    
     重置    
   
  
  
   总价：{{ getmaney() }}  
  
   

得出总的费用：

getmaney:function(){    var m=0;    for(var x=0;x
2.全选与取消全选
           
      a      b      全选  
   
二、计算属性
1.computed
特点：
在computed属性对象中定义计算属性的方法，在页面上使用{{方法名}}来显示计算结果。
通过getter/setter来显示和监视属性数据。
计算属性存在缓存，多次读取只执行一次getter。
           
   
{{ mess }}
   
{{ remess }}
   
{{ mess.split('').reverse().join('') }}
  
   
2.methods
computed基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用methods，在重新渲染的时候，函数总会重新调用执行。
           
      
{{ mess }}
   
{{ remess }}
   
{{ remess2() }}
  
   
3.setter
当页面获取某个数据的时候，先会在data里面找，找不到就会去计算属性里面找，在计算属性里获取数据时会自动执行get方法，同时也提供了set方法。computed属性默认只有getter，不过在需要时也可以提供一个setter。
           
   
{{ site }}
  
   
感谢各位的阅读，以上就是"Vue监听属性和计算属性怎么使用"的内容了，经过本文的学习后，相信大家对Vue监听属性和计算属性怎么使用这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是，小编将为大家推送更多相关知识点的文章，欢迎关注！