css侧边栏实现点击后样式改变（vue）

Question

各位老哥，今天阅读源码的时候发现一个问题，具体功能是实现一个侧边栏，然后点击其中的div后改变它的样式，但是其中的代码有些不太理解，具体代码如下：
尤其是这一段：:class="{ select: true, active: item.id === sel }以及css文件中的&.active；请问这里是如何实现这个功能的啊，各位老哥谢谢了

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: '行业新闻', id: 3},
        ],
    }
}

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

Answer 1

这就是样式的动态绑定啊,请看vue的官网https://cn.vuejs.org/v2/guide...

至于&.active表示select的同级类，渲染出来会是这样的：<div class="select active"></div>
明白？