vue中高亮显示组件

点击不同的组件，高亮显示并渲染组件
html结构
通过点击改变样式

<div class="citybutton">
<span class="select-city" :class="{'active':tabActive===0}" @click="tabActive=0">国内</span>
<span class="select-city" :class="{'active':tabActive===1}" @click="tabActive=1">国外</span>
</div>
<div class="city-switch">
  <section v-show="tabActive===0">
  <foreigncity :citylist="citylist"></foreigncity>
  </section>
  <section v-show="tabActive===1">
  <domesticcity></domesticcity>
  </section>
 </div>

data绑定数据

data () {
    return {
      tabActive: 0,
    }
  }

stylus样式

.select-city
      padding: .05rem 0
      text-align: center
      width: 1.5rem
     &.active
         background: #fff

默认样式