小程序项目常遇问题

2022-03-22  本文已影响0人  autumn_3d55

1.微信小程序在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>
上一篇下一篇

猜你喜欢

热点阅读