当页面获取某个数据的时候,先会在data里面找,找不到就会去计算属性里面找,在计算属性里面,获取的时候会自动去执行get方法
<div id='app'> {{fullName}} </div> <script> var vm = new Vue({ el:'#app', data:{ firstName: 'Mike', lastName: 'Lee' }, computed:{ fullName:{ get:function(){ return this.firstName + this.lastName } } } }) </script>
既然可以写get,自然可以写与之对应的set
<div id='app'> {{fullName}} </div> <script> var vm = new Vue({ el:'#app', data:{ firstName: 'Mike', lastName: 'Lee' }, computed:{ fullName:{ get:function(){ return this.firstName + this.lastName }, set:function(value){ var arr = value.split(' '); this.firstName = arr[0]; this.lastName = arr[1]; } } } }) </script>
当控制台去设置fullName值的时候,会自动执行set方法,比如vm.fullName='Mike Wang',fullName被设置,fullname会打散,重新改变firstName和lastName的值