转载: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>