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
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值