Vue - 计算属性

翻转字符串

初始值:{{msg}}

反转值:{{msg.split('').reverse().join('')}}

翻转结果

简单的这样写并没有问题,但是在复杂的工程里面,一个一个的列式调用会非常复杂,那我们抽取成函数就可以了

初始值:{{msg}}

反转值:{{msg.split('').reverse().join('')}}

函数调用:{{reverseStr()}}

翻转结果

但是,标题已经很明显了,讲的并不是这些,而是计算属性,那就从代码来看看

初始值:{{msg}}

反转值:{{msg.split('').reverse().join('')}}

计算属性:{{reverse}}

翻转结果

计算属性和Methods的区别

  • 计算属性:当页面的重新渲染(不是刷新)的时候,计算属性不会改变,直接读取缓存使用,适合较大量的计算和改变频率较低的属性;
  • Methods:在页面重新渲染的时候(页面元素的data变化,页面就会重新渲染),都会重新调用method

setter:不经常使用

{{fullName}}

你可能感兴趣的:(Vue - 计算属性)