Vue 带参数 的computed (计算属性)
官方的案例中,computerd 都是不带属性的。<div id="example"><p>Original message: "{{ message }}"</p><p>Computed reversed message: "{{ reversedMessage }}"</p></div>var vm = new Vue({
·
官方的案例中,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
}
更多推荐
已为社区贡献3条内容
所有评论(0)