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

4次阅读

共计 681 个字符，预计需要花费 2 分钟才能阅读完成。

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

计算属性中很可能要用到 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>

正文完