vue计算属性computed的使用方法示例

2019-11-19 11:59:59

字体：大中小

来源：转载

供稿：网友

本文实例讲述了vue计算属性computed的使用方法。分享给大家供大家参考，具体如下：

computed:{    b:function(){  //默认调用get      return 值    }}

computed:{    b:{      get:      set:    }}

* computed里面可以放置一些业务逻辑代码，一定记得return

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>www.VeVB.COm vue计算属性computed</title>  <style>  </style>  <script src="https://cdn.bootcss.com/vue/1.0.4/vue.min.js"></script></head><body>  <div id="box">    a => {{a}}    <br>    b => {{b}}  </div>  <script>    var vm=new Vue({      el:'#box',      data:{        a:1      },      computed:{        b:{          //业务逻辑代码,b的值完全取决于return回来的值          get:function(){            return this.a+2;//默认调用get          },          set:function(val){            this.a=val;          }        }      }    });    document.onclick=function(){      vm.b=10;//相当于set函数传入val=10    };  </script></body></html>

运行结果：