上篇博客讲了小程序实现 watch 机制,这篇介绍如何实现 computed 计算属性。
小程序的计算属性和 Vue.js 的不太一样——小程序在.wxml(不是.js)文件中定义(其实是借用 wxs 标签实现的):
<view class="container">
<wxs module="fn">
module.exports = {reverse: function(str) {return str.reverse()
},
arr2Str: function(arr) {return arr.join('、')
}
}
</wxs>
<text>{{fn.reverse('大海爱奔跑') }}</text>
<text>{{fn.arr2Str(['Vue', 'Node', '小程序', 'JS', 'CSS']) }}</text>
</view>
Tips
计算属性中很可能要用到 data
,亲测下来仿佛援用不到,即不能通过this.data.xxx
拜访到,能够换种形式实现——在调用的中央,往函数里传递须要应用的 data 字段,比方:
<wxs module="fn">
module.exports = {getText: function(keyword, length) {// 这里不能应用 `${xxx}` 格局,否则报错
return '关键词' + keyword + '匹配到' + length + '个后果'
}
}
</wxs>
<!-- 这里传入 keyword 和 names.length,下面的 getText 则能够应用 -->
<view class="key">{{fn.getText(keyword, names.length) }}</view>