微信小程序实现computed计算属性

大海爱奔跑 - 2021-12-14 06:22:50

上篇博客讲了小程序实现watch机制，这篇介绍如何实现computed计算属性。

小程序的计算属性和Vue.js的不太一样——小程序在.wxml（不是.js）文件中定义（其实是借用wxs标签实现的）：

<view >
  <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 >{{ fn.getText(keyword, names.length) }}</view>

特别申明：本文内容来源网络，版权归原作者所有，如有侵权请立即与我们联系（cy198701067573@163.com），我们将及时处理。

上一篇：学习 27 门编程语言的长处，提升你的 Python 代码水平

下一篇： Python居然可以实现打卡自由了？