用vue简单的实现点击按钮切换背景颜色

  <div class="btnTitle">
      <div class="btn-bg" :class="{bg:time == 3}" @click="changeBg(3)">15天</div>
      <div class="btn-bg" :class="{bg:time == 4}" @click="changeBg(4)">30天</div>
  </div>
  <div class="btnTitle">
       <div class="btn-bg" :class="{bg:increase == 5}" @click="changeBg(5)">增量</div>
       <div class="btn-bg" :class="{bg:increase == 6}" @click="changeBg(6)">总量</div>
   </div>
   // 在methods方法里面
   data () {
   			time: 3,
      		increase: 5, 
   },
    methods: {
    changeBg (index) {
      if (index === 3 || index === 4) {
        this.time = index
      } else if (index === 5 || index === 6) {
        this.increase = index
      } else {
        this.sort = index
      }
    }
  }
  // css样式
  <style lang="scss">
		.bg {
		      background-color: rgb(12, 197, 89);
		       color: #fff;
	     }
	     .btnTitle {
             display: flex;
             width: 400px;
             border: 1px solid #ccc;
             background-color: #fff;
             margin-left: 10px;
             border-radius: 5px;
             .btn-bg {
                 width: 50%;
                 height: 40px;
                 text-align: center;
                 line-height: 40px;
                 border-radius: 5px;
             }
         }
  </style>

点击前

点击后

就这样简单的切换效果就达到了！！！！