VUE之计算属性和监听器

vue中对于数据的处理最常用的有计算属性以及监听器。计算属性和监听器都是vue实例的一个属性。本文就来聊一聊计算属性和监听器。

计算属性

什么是计算属性?

计算属性(computed)是vue实例的一个属性。计算属性通俗点讲就是某个元素数据的值不是直接获取,而是依赖其他元素数据的值来获取。比如下面这个场景:有三个元素:姓、名、姓名,其中姓和名的值是通过数据绑定直接在输入框中获取或设置,而姓名的值是通过拼接元素姓以及元素名的值来获取的,一旦元素姓或者元素名有变化,那么元素姓名的值也要跟着变化。那么这种情况下,元素姓名的值就用计算属性来获取就比较合适。

计算属性中有set和get两种方法,这两种方法适用的情况不一样,get用来获取属性值,set用来监听属性值的变化,需要注意的是计算属性存在缓存,多次获取属性值只执行一次get计算。就拿上面那个例子来讲,第一种情况:如果是单向绑定,也就是元素姓和元素名的变化会影响元素姓名的值,但是元素姓名的值变化不会影响到元素姓和元素名的值,那么就用计算属性的get方法就行,例如:

computed: {

//第一种写法:

xingming: function () {

return this.xing + this.ming

}

//第二种写法:

xingming () {

return this.xing + this.ming

}

//第三种写法:

xingming :{

get(){

return this.xing + this.ming

}

}

}

第二种情况:如果是双向绑定,也就说,元素姓和元素名的变化会影响到元素姓名,反过来元素姓名的变化同样会影响到元素姓和元素名,这时候就同时用到计算属性的get和set方法了,例如:

computed: {

xingming :{

get(){

return this.xing + this.ming

}

//set用来监听属性值的变化,参数value就是元素的最新值

set(value){

const names = value.split(‘ ’)

this.xing = names[0]

this.ming = names[1]

}

}

}

监听器

什么是监听器?

监听器(watch)也是vue实例的一个属性,其主要就是用来监听元素值的变化从而来做各种相应的处理,比如上面例子中监听元素姓或元素名的变化从而去提示用户,这时候就可以用监听器去实现。例如:

watch: {

// 如果 `xing` 发生改变,这个函数就会运行,就会提示用户元素值的现值和原值

xing: function (newQuestion, oldQuestion) {

alert('姓原值:'+ oldQuestion)

alert('姓现值:'+ newQuestio)

}

}

以上就是计算属性和监听器的相关概念及运用,如有错误欢迎指正!谢谢!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值