一,计算属性
举个例子,如果要实现字符串的反向输出,需要这样写:
<div>{{msg.split('').reverse().join('')}}</div>
这样一来,模板里面的字符串就太复杂了,于是就想把它放到专门的地方处理,让html只起页面结构的作用。
也就是:
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css"></style></head><body><div id="app"><div >{{msg}}</div><div >{{reverseString}}</div></div><script type="text/javascript" src="./js/vue.min.js"></script><script type="text/javascript">var vm=new Vue({el: "#app",data:{msg:'hello'},computed:{reverseString:function(){return this.msg.split('').reverse().join('')}}})</script></body></html>
可以注意到:计算属性是基于data中的数据进行处理的!!所以这里需要用this。
二,计算属性compute和method的区别
主要的区别是计算属性是基于它的data进行了缓存,第二次使用时,就可以直接使用缓存中的结果了。而不需要像method一样每次都执行函数。
三,计算属性的set和get
计算属性默认只有 getter,不过在需要时你也可以提供一个 setter,这时候,计算属性不是个函数,而是个对象的写法了:
// ...computed: {fullName: {// getterget: function () {return this.firstName + ' ' + this.lastName},// setterset: function (newValue) {var names = newValue.split(' ')this.firstName = names[0]this.lastName = names[names.length - 1]}}}// ...
现在再运行 vm.fullName = ‘John Doe’ 时,setter 会被调用,vm.firstName 和 vm.lastName 也会相应地被更新。也就是说
👀计算属性的set实际上就是这个计算属性被改变时,会执行set中的代码罢了。
👀而get就是返回这个计算属性的值。
如果觉得《vue学习笔记-12-计算属性》对你有帮助,请点赞、收藏,并留下你的观点哦!