微信小程序在wxml双大括号中执行复杂运算

　　微信小程序数据绑定支持双大括号中的表达式，但目前只支持这四种表达式：算数表达式、关系表达式、字符串连接表达式、三元表达式。vue则是全功能的JS表达式。使用起来明显差别在于是否支持函数/方法表达式

 

1. 遇到的问题

<!-- 有效 -->
  <view>{{ 1+1 }}</view>
  <view>{{ 2>1 ? '是':'否'}}</view>
 
  <!-- 无效 -->
  <view>{{ Math.random() > 0.5 ? '大于':'小于' }}</view>
  <view wx:for="{{'1,2,3'.split(',')}}">
      {{item}}
  </view>

 

2.解决办法

    <view wx:for="{{fn.split(str)}}">
        {{item}}
    </view>
    <wxs module="fn">
      module.exports = {
          split: function(str){
            return str.split(',');
          }
      }
    </wxs>

 

其他示例：

<wxs module="fn">
      module.exports = {
          split: function(str){
            return str.split(',');
          },
          random: function(){
            return Math.random();
          }
      }
  </wxs>
  <view>{{fn.random() > 0.5 ? '大于':'小于'}}</view>
  <view wx:for="{{fn.split('1,2,3')}}">
      {{item}}
  </view>