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

转载：https://blog.csdn.net/w390058785/article/details/84104911

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

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、解决方案

<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就能够实现复制运算的效果啦。

3、方法进阶

在模板中插入复杂运算的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>

复制代码