Vue 带参数 的computed （计算属性）

官方的案例中，computerd 都是不带属性的。

<div id="example">
  <p>Original message: "{
    
    { message }}"</p>
  <p>Computed reversed message: "{
    
    { reversedMessage }}"</p>
</div>

var vm = new Vue({
    
    
  el: '#example',
  data: {
    
    
    message: 'Hello'
  },
  computed: {
    
    
    // 计算属性的 getter
    reversedMessage: function () {
    
    
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

如果 reversedMessage 改为带有参数的形式。

reversedMessage: function (parameter) 

那么 使用时就会报错 reversedMessage is not a function
这是因为返回值是string 的缘故。

所以想要带有参数需要稍微修改一下reversedMessage。

 <p>Computed reversed message: "{
    
    { reversedMessage('2333') }}"</p>

 reversedMessage: function () {
    
    
      // `this` 指向 vm 实例
      return (parameter)=>{
    
    
   	   return  this.message.split('').reverse().join('') + parameter
	 } 
    }

这样一来reversedMessage的返回值就是一个匿名函数，而这个函数将完成原先由reversedMessage计算的结果。
值得注意的是，如parameter 放在了 要计算的属性后面，取到的是vm实例。

reversedMessage: function (parameter) {
    
    
// parameter == vm
}