Vue 计算属性基本和监视属性使用

计算属性 监视属性 同时被 2 个专栏收录
1 篇文章 0 订阅
2 篇文章 0 订阅

计算属性 (computed)

  • 在computed属性对象中定义计算属性的方法;在页面中使用 {{方法名}} 来显示计算的结果

例如在下面的input中,如果要让该文本框内容本更,可以结合computed属性来完成,其中必须要用v-model命令进行绑定

<input type="text" placeholder="First Name" v-model="firstName"/>
computed:{
	//什么时执行: 初始化显示 / 相关的data属性数据放生改变
	firstName(){//	计算属性中的一个方法,方法的返回值作为属性值
		return this.firstName + '计算后的数据';
	},
}
  • 计算属性高级
    通过getter/setter实现对属性数据的显示和监视;
    切记:计算属性存在缓存,多次读取只执行一次getter计算
firstName:{
	//回调函数 当需要都去当前属性值时回调, 根据相关的数据计算并返回当前属性的值
	get(){
		return this.firstName + '计算后的数据';
	},
	//回调函数 监视当前属性值的变化 当属性值发生改变时回调,更新相关的属性数据
	set(value){// value 就是firstName的最新属性值
		this.firstName = '1111';
	}
}

监视属性 (watch)

  • 通过vm对象的 $watch() 或 watch配置来监视指定的属性。
    当属性变化时,回调函数会自动调用,在函数内部进行计算;
    其中监视分为配置监视和vue的实例方法
watch:{// 此为配置监视
	firstName(newValue, oldValue){
		return this.firstName + '计算后的数据';
	},
}
  • vue实例方法监视
vm.$watch('firstName',function(newValue, oldValue){
	this.firstName = newValue + '计算后的数据';
})

注意:每一个属性都有一个对应的set/get放到,它们均为回调函数;其中get方法的作用是返回当前属性的值,set(value)方法为监视作用,一但属性值更改后就会触发,value为最新的值

  • 1
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 像素格子 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值