首页 > 代码库 > vue(2) - 计算属性的使用-computed
vue(2) - 计算属性的使用-computed
首先,computed的使用方法:
computed:{
b:function(){ //默认调用get
return 值
}
}
完整用法:
computed:{
b:{
get: //默认的写法
set: //设置值的
}
}
具体实例:
<script> window.onload=function(){ var vm= new Vue({ el:‘#box‘, data:{ a:1, }, computed:{ b:function(){//b在这里不是一个函数,只是一个属性 //写业务逻辑代码 //return 1 //返回多少b的值就是多少,不return,没有值 return this.a+1 } } }); document.onclick=function(){ vm.a=101; } }; </script>
//html
<div id="box"> a=> {{a}} <br/> b=> {{b}} </div>
结果:点击页面时,
a=>101
b=>102
<script> window.onload=function(){ 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; } }; </script> //html <div id="box"> a=> {{a}} <br/> b=> {{b}} </div>
结果:点击页面时,
a=>10
b=>12
*和data的区别是 computed 放一些业务逻辑的代码,切记放return
vue(2) - 计算属性的使用-computed
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。