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

複製代碼