在小程序的开发过程中,三目运算符是可以嵌套使用的,如果界面上有多个条件来区分不同样式,可以有两种实现方式,一种是用if else判断写多个组件,另一种是使用嵌套的三目运算符可以减少很多代码,下面上代码演示一下使用对比
设一个多条件需求:
字体默认为黑色
1、若num = 1,文字颜色为蓝色
2、若num = 2,文字颜色为绿色
3、若num = 3,文字颜色为红色
不使用三目运算符写法:
<view wx:if="{{num==1}}" style="color:blue;">展示文字颜色</view>
<view wx:elif="{{num==2}}" style="color:green;">展示文字颜色</view>
<view wx:elif="{{num==3}}" style="color:red;">展示文字颜色</view>
<view wx:else style="color:black;">展示文字颜色</view>
使用三目云算符嵌套实现:
<view style="color:{{num==1? 'blue':num==2? 'green':num==3? 'red':'black'}}">
展示文字颜色</view>
如上所示,这种需求使用三目运算符嵌套实现,可以大量减少代码量,此处还只是简单的文字展示,当内容比较复杂的时候,优化的效果更加明显。
想看更多关于小程序的开发技巧,可关注博主的其他博客,不讲花架子,只分享开发项目中踩坑经验,希望能帮助到大家。