微信小程序三元表达式的坑

2024-01-13 17:02:30 浏览数 (2)

谈起三元表达式,相信许多开发人员已经耳熟能详,它比IF...ELSE结构简单许多,无需编写过多的代码。实际上,三元表达式是一种语法糖,最早由JAVA提出。语法糖是简化复杂语法的一种方式,当然,这需要一定的经验和基础才能理解。好了,让我们回到微信小程序中的三元表达式,在JS文件中使用应该没有问题。关键在于如何在wxml中进行三元表达,这是我们关注的重点,它可以大大减少后台的操作。

在微信小程序的wxml大家最熟悉的估计就是 wx:if 这样的判断吧。例如:

代码语言:js复制
 <view wx:if="{{err}}" style="font-size: 38rpx;">[{{iValue}}]没有找到当前跟进信息</view>

这个就是对err进行判断,如果err为空就不显示view的内容。这个不明白也不用往下看了,好吧,我们还是赶紧上我们的干货。。

代码语言:js复制
 <view>
 <radio value="DInclude" name="ChargeTax" checked="{{ChargeTax=='DInclude'?'true':'false'}}">不含税</radio>
 <radio value="Include" name="ChargeTax" checked="{{ChargeTax=='Include'?'true':'false'}}">含税</radio>
 </view>

上面这段代码估计很多同学看后都会觉得逻辑没问题,就是判断ChargeTax这个变量是否与相关的字符串匹配,但在真实的环节下,就算匹配也只会显示false,一开始我也查了很长时间。。后来发现原来只要将false换位空就可以了。。

代码语言:js复制
 <view>
 <radio value="DInclude" name="ChargeTax" checked="{{ChargeTax=='DInclude'?'true':''}}">不含税</radio>
 <radio value="Include" name="ChargeTax" checked="{{ChargeTax=='Include'?'true':''}}">含税</radio>
 </view>

最后,由于在wxml进行字符包含判断是一件比较痛苦的事情,所以这边再放出一个字符串包含判断的module,这个我好似之前分享过,如果是就当复习一下吧。。

代码语言:js复制
<wxs module="indexofStr">
 var fineit = function (str1, str2) {
 if (typeof (str1) == "undefined") {
 return ""
 }
 return str1.indexOf(str2)
 }; 
 module.exports = { 
    fineit: fineit
 }
</wxs>

调用方法:(判断变量是否存在.mp4)

代码语言:js复制
 <view wx:if="{{indexofStr.fineit(item,'.mp4') > -1}}">
 <video style="margin: 0 auto;width:100%;" src="{{item}}" class="imgList" mode="aspectFill" />
 </view>

好吧,就这样了。。2024年的第一篇文章。。。over。

0 人点赞