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

发表时间：2021-1-11

发布人：葵宇科技

浏览次数：120

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

1. 遇到的问题

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

2.解决办法

 1     <view wx:for="{{fn.split(str)}}">
 2         {{item}}
 3     </view>
 4     <wxs module="fn">
 5       module.exports = {
 6           split: function(str){
 7             return str.split(',');
 8           }
 9       }
10     </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>