vue computed计算属性的get和set函数

get和set都是回调函数
什么是回调函数:1/你定义的 2/你没有调用 3/但最终执行了
关于回调函数需要知道的两个问题:1/什么时候调用 2/用来做什么

const vm = new Vue ({
	data: {
		firstName; ‘A’,
		lastName: 'B'
	},
	computed: {
		fullName: {
			//1/当需要读取当前属性值时调用(初始化)/当依赖项变化时也调用该回调函数  2/根据相关数据计算并返回当前属性值
			get () {
				return firstName + ' ' + lastName;
			},
			//1/监视:当属性值变化时调用该回调函数        2/根据最新的属性值计算相关数据
			set (value) {   //fullName是要监听的属性,value是fullName的最新属性值
				this.firstName = value.split(' ').[0];
				this.lastName = value.split(' ').[1];
			}
		}
	}
})

html

姓:<input type="text" v-model="firstName" />
名:<input type="text" v-model="lastName" />
姓名:<input type="text" v-model="fullName" />   //计算属性不能加()
  • 3
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值