通常我们会在模板中绑定表达是,模板是用来描述视图结构的。如果模板中的表达式存在过多逻辑,模板就会变得臃肿不堪,难以维护。为了简单逻辑,当某个属性依赖于其他属性的值时,我们可以使用计算属性。
什么是计算属性
计算属性就是当其依赖属性的值发生变化时,这个属性的值会自动更新,与之相关的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部分