官方的案例中,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
}
Logo

前往低代码交流专区

更多推荐