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

0
分类: 微信小程序
浏览:106

0 条评论

发表评论

电子邮件地址不会被公开。

你必须允许浏览器启用JavaScript才能看到验证码

Scroll Up