微信小程序点击文字变色

做了一个订单页面，实现支付和未支付订单查看时文字变色，进入页面时默认显示未支付订单

js:

Page({

 onShow () {
  this.noPay();
 },

 noPay(){
  this.setData({
   currentIndex:0
  })
 },

 allPay(){
  this.setData({
   currentIndex:1
  })
 }

})

wxml:

<view class="order-status">
 <view bindtap="noPay" style="{{currentIndex==0?'color:#1296DB':''}}">未支付</view>
 <view bindtap="allPay" style="{{currentIndex==1?'color:#1296DB':''}}">已支付</view>
</view>

 wxss：

.order-status{
 display:flex;
 flex-direction: row;
 justify-content: space-around;
 margin: 30rpx 40rpx;
 font-weight: 550;
 font-size:30rpx;
}

最终效果：