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

程序员文章站 2022-05-17 10:11:32

...

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

什么是计算属性

计算属性就是当其依赖属性的值发生变化时，这个属性的值会自动更新，与之相关的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方法演示

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