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}

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1ea9a31-47d45.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1ea9a31-47d45.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?