各位老哥，今天閱讀源碼的時候發(fā)現(xiàn)一個問題，具體功能是實現(xiàn)一個側邊欄，然后點擊其中的div后改變它的樣式，但是其中的代碼有些不太理解，具體代碼如下：
尤其是這一段：:class="{ select: true, active: item.id === sel }以及css文件中的&.active；請問這里是如何實現(xiàn)這個功能的啊，各位老哥謝謝了

html：
<div class="sideSelect">
        <div :class="{ select: true, active: item.id === sel }" v-for="(item,index) in tabs" :key="index"
             @click="select(item)">
          {{ item.label }}
        </div>
      </div>
      

css：
.sideSelect {
      width: 180px;
      height: 440px;
      float: left;
      background-color: #FFFFFF
      .select {
        height: 50px;
        padding: 18px;
        font-family: MicrosoftYaHei;
        line-height: 21px;
        font-size: 14px;
        color: #333333;
        &.active {
          background: #FD9827;
          color: #FFFFFF;
        }
      }
    }
    
JS：
data(){
    return{
         sel: 1,
          tabs: [
          {label: '全部新聞', id: 1},
          {label: '公司新聞', id: 2},
          {label: '行業(yè)新聞', id: 3},
        ],
    }
}

methods:{
    select(item) {
        this.sel = item.id;
      },
}