vue计算属性computed的使用
计算属性computed描述:在同一个实例化对象中,其中一个属性改变,要求另外一个属性也跟着改变angular事件监听: $scope.$watch计算属性的使用:computed:{b:function(){//默认调用getreturn 值}}小例子:div id="box">a => {{a}}br>b => {{b}}div>
·
计算属性computed
描述:在同一个实例化对象中,其中一个属性改变,要求另外一个属性也跟着改变
angular事件监听: $scope.$watch
计算属性的使用:
computed:{
b:function(){ //默认调用get
return 值
}
}
小例子:<div id="box"> a => {{a}} <br> b => {{b}} </div> <script> var vm=new Vue({ el:'#box', data:{ a:1 }, computed:{ b:function(){ //业务逻辑代码 return this.a+1; } } }); document.onclick=function(){ vm.a=101; }; </script>------------------------------------------
computed:{
b:{
get: function(){ //默认调用get
return 值
}
set:function(){ //默认调用get
return 值
}设置值
}
}
小例子:
<div id="box"> a => {{a}} <br> b => {{b}}</div><script> var vm=new Vue({ el:'#box', data:{ a:1 }, computed:{ b:{ get:function(){ return this.a+2; }, set:function(val){ this.a=val; } } } }); document.onclick=function(){ vm.b=10;//可以在此改变computed的值 };</script>温馨提示:同样是属性,computed的特殊之处在于里面可以放置一些业务逻辑代码,但是一定记得return
更多推荐
已为社区贡献6条内容
所有评论(0)