关于前端:微信小程序实现computed计算属性

上篇博客讲了小程序实现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>