How should the dynamic binding css module style be written in vue?

<swiper height="146px" loop :class="$style.swiper" @on-index-change="activeIndex">
      <swiper-item :class="$style["swiper-item"]" v-for=(item,index) in items>
        <img :class="$style.img" src="img1" alt="">
      </swiper-item>
  </swiper>
  
  
data () {
    return {
      active: 1
      }
}

<style module lang="scss">
    .swiper-item {
  width: 335px;
  padding: 5px 5px;
  box-sizing: border-box;
  overflow: hidden;
  .img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
  }
}
.active {
  padding: none;
}
</style>


activeindexactive, ?

 :class="$style["swiper-item"]"

I think it should be
: class= "[$style ["swiper-item"], $style.active:active=index]"
is written like this, but the compilation does not pass

.
Nov.19,2021

  

: class= "{[$style ['swiper-item_active']]: activeIndex = index}

Menu