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

更新时间：2020-08-17 14:42:01 作者：startmvc

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

本文实例讲述了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.jb51.net 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>

运行结果：