微信小程序在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>