欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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)

Vue--计算属性(getter/setter)

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


setter方法演示

Vue--计算属性(getter/setter)Vue--计算属性(getter/setter)

Vue--计算属性(getter/setter)

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


相关标签: 计算属性