微信小程序给循环列表点击toggle class类名切换

<view class="pop_xzli {{item.isActive ? 'on' : ''}}" data-index="{{index}}" wx:for="{{sailist}}" wx:key="index"  bindtap="toggleItem">
          {{item.name}}
          </view>

sailist:[
      { name: '意式咖啡系列', isActive: false },
      { name: '甄选系列', isActive: false },
      { name: '挂耳系列', isActive: false },
      { name: '意式咖啡系列', isActive: false },
      { name: '甄选系列', isActive: false },
      { name: '挂耳系列', isActive: false },
      { name: '意式咖啡系列', isActive: false },
      { name: '甄选系列', isActive: false },
      { name: '挂耳系列', isActive: false },
      { name: '意式咖啡系列', isActive: false },
    ],

toggleItem(e) {
    const index = e.currentTarget.dataset.index;
    const sailist = this.data.sailist;
    sailist[index].isActive = !sailist[index].isActive;
    this.setData({ sailist });
  },

.pop_xzli{width: 30.33%; font-size: 26rpx; float: left; margin: 20rpx 3% 0 0; text-align: center; overflow: hidden; box-sizing: border-box; border: 2rpx #9b9b9b solid; line-height: 60rpx; border-radius: 60rpx; text-overflow: ellipsis; white-space: nowrap; padding: 0 14rpx;}
.pop_xzli.on{background: #383838; color: #fff;}