【微信小程序】在wxml中执行复杂运算的巧妙方法

1,249 阅读1分钟
转载:https://blog.csdn.net/w390058785/article/details/84104911

前言:微信小程序wxml中的{{ }}可以进行简单四则运算,三元运算符等简单的运算。但是像str.split(','),arr.concat()等复杂的运算是没办法在{{ }}中执行的。但是我们可以通过其他方法实现他。

一、问题还原

  <!-- 可以这么用 -->
  <view>{{ 1+1 }}</view>
  <view>{{ 2>1 ? '是':'否'}}</view>
 
  <!-- 不可以这么用 -->
  <view>{{ Math.random() > 0.5 ? '大于':'小于' }}</view>
  <view wx:for="{{'1,2,3'.split(',')}}">
      {{item}}
  </view>

二、解决方案

  <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>

像在wxml中插入wxs就可以实现复制运算的效果啦。

三、方法进阶

在模板中插入复杂运算的wxs

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