Vue--计算属性（getter/setter）

通常我们会在模板中绑定表达是，模板是用来描述视图结构的。如果模板中的表达式存在过多逻辑，模板就会变得臃肿不堪，难以维护。为了简单逻辑，当某个属性依赖于其他属性的值时，我们可以使用计算属性。

什么是计算属性

计算属性就是当其依赖属性的值发生变化时，这个属性的值会自动更新，与之相关的DOM部分也会同步更新。

<div id="example">
<input type="text" v-model="didi" name="">
<input type="text" v-model="family" name="">
<input type="text" v-model="didiFamily" name="" lazy>
<br>
didi={{didi}},family={{family}},didiFamily={{didiFamily}}
</div>

var vm=new Vue({
el: '#example',
data: {
didi: 'didi',
family: 'family',

},
computed: {
didiFamily:{
get: function(){
//this指向vm实例
return this.didi+''+this.family
},
set:function(newVal){
var names=newVal.split(',')
this.didi=names[0]
this.family=names[1]
}
},

}
})

getter方法演示

当vm.didi和vm.family的值发生改变时，vm.didFamily的值也会自动更新，并且会自动同步更新DOM部分

setter方法演示

当vm.didFamily的值发生改变时，vm.didi和vm.family的值也会自动更新，并且会自动同步更新DOM部分