在wxml文件中使用的计算属性

很多时候我们需要将数据加工后再显示到页面上，例如，我在显示排行榜的循环中，排名我需要在个位数之前补0这样的操作时就需要在wxml页面中使用到计算属性。
微信小程序的计算属性和vue有所不同，在页面中使用的时候可以如下：

<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，但是在页面中的计算属性没办法直接拿到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>

在JS文件中使用的计算属性

上面我们讲了微信小程序页面上的计算属性使用，现在来介绍一下微信小程序在js文件中计算属性的使用，这其中就需要用到npm模块了。

安装npm模块

npm install --save miniprogram-computed

具体使用方法

const computedBehavior = require("miniprogram-computed").behavior;

Component({
  behaviors: [computedBehavior],

  data: {
    a: 1,
    b: 1,
  },

  computed: {
    sum(data) {
      // 注意： computed 函数中不能访问 this ，只有 data 对象可供访问
      // 这个函数的返回值会被设置到 this.data.sum 字段中
      return data.a + data.b;
    },
  },

  methods: {
    onTap() {
      this.setData({
        a: this.data.b,
        b: this.data.a + this.data.b,
      });
    },
  },
});

以上就是微信小程序中关于计算属性的两种使用方法和场景，参考了网络上的其他人的帖子总结而来
转载自：
https://developer.aliyun.com/article/813779
https://segmentfault.com/a/1190000041022284?sort=votes