微信小程序中三目运算符的嵌套使用

在小程序的开发过程中，三目运算符是可以嵌套使用的，如果界面上有多个条件来区分不同样式，可以有两种实现方式，一种是用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>

如上所示，这种需求使用三目运算符嵌套实现，可以大量减少代码量，此处还只是简单的文字展示，当内容比较复杂的时候，优化的效果更加明显。

想看更多关于小程序的开发技巧，可关注博主的其他博客，不讲花架子，只分享开发项目中踩坑经验，希望能帮助到大家。