Vue uniapp はセグメンター効果を実現します

<view class="countTime">
 <text class="title">割引と食事時間</text>
 <view class="wrap">
  <view class="box" v-for="(item,index) in discountList" :key="index" @click="toggleItem(index)">
   <view class="selBox" :style="[itemStyle(index)]">
    <view class="countBox">
     <text class="count">{{item.count}}</text>
     <text>折りたたむ</text>
       </ビュー>
    <text class="time">{{item.time}}</text>
   </ビュー> 
   <text class="countPrice" :style="[priceStyle(index)]">割引後、1人あたりの平均価格は100円です</text>
  </ビュー>
 </ビュー>
</ビュー>

エクスポートデフォルト{
  データ（） {
   戻る {
    themColor:this.Enum.Them.base、
    割引リスト:[{
     「カウント」:6.9,
     "時間":"12:00~13:00"
    },{
     「カウント」:6.7,
     "時間":"14:00~16:00"
    },{
     "カウント":6.5,
     "時間":"20:00~22:00"
    }],
    現在のインデックス:0
   }
  },
  計算:{
   アイテムスタイル(){
    インデックスを返す => {
     スタイルを {} にします
     if(インデックス === this.currentIndex){
      style.backgroundColor = this.themColor;
      style.border = `1px solid ${this.themColor}`;
      スタイルの色 = '#fff';
     }
     //2番目が選択されると、最初の右の境界線と3番目の左の境界線はnoneに設定されます
     if(this.currentIndex === 1){
      if(インデックス === this.currentIndex - 1){
       style.borderRight = 'なし!重要'
      }
      if(インデックス === this.currentIndex + 1){
       style.borderLeft = 'なし!重要'
      }
     }
     戻りスタイル
    }
   },
   価格スタイル(){
    インデックスを返す => {
     スタイルを {} にします
     if(インデックス === this.currentIndex){
      style.color = this.themColor
     }
     戻りスタイル
    }
   }
  },
  メソッド: {
   トグルアイテム(idx){
    this.currentIndex = idx
   }
  }
 }

.countTime{
  ディスプレイ: フレックス;
  flex-direction: 列;
  。タイトル{
   フォントサイズ: $uni-font-size-bl;
   マージン: 20rpx 0;
  }
  。包む{
   ディスプレイ: フレックス;
   。箱{
    @include flex(列、中心、中心);
    幅: 33%;
    &:n番目の子(2){
     & > .selBox{
      左境界線: なし;
      右境界線: なし;
     }
    }
    .selBox{
     @include flex(列、中心、中心);
     幅: 100%;
     高さ: 150rpx;
     境界線: 1px 実線 $uni-border-color;
     .countBox{
      フォントサイズ: $uni-font-size-lg;
      フォントの太さ: 太字;
      下部マージン: 10rpx;
      。カウント{
       フォントサイズ: $uni-font-size-bl;
      }
     }
     。時間{
      フォントサイズ: $uni-font-size-l;
     }
    }
    .count価格{
     上マージン: 10rpx;
     フォントサイズ: $uni-font-size-l;
    }
   }
  }
 }