vue 多选按钮 点击选中改变样式 再次点击取消选中

话不多说  先看图

代码：

      <view class="">
        <view class="oneTit"> 房源属性(多选) </view>
        <view class="listingsSty fangy">
          <view
            class="firsty"
            v-bind:class="item.ischeck == true ? 'active' : ''"
            v-for="(item, index) in typeList"
            v-bind:key="index"
            @click="sel(index, item)"
          >
            {{ item.name }}
          </view>
        </view>
      </view>

data 数据：

selarr: [1],//默认选中第一个
typeList: [
        {
          val: 1,
          ischeck: true,
          name: "住宅",
        },
        {
          val: 2,
          ischeck: false,
          name: "公寓",
        },
        {
          val: 3,
          ischeck: false,
          name: "商铺",
        },
        {
          val: 4,
          ischeck: false,
          name: "别墅",
        },
        {
          val: 5,
          ischeck: false,
          name: "写字楼",
        },
      ],

methods中：

    sel(index, item) {
      if (item.ischeck == false) {
        item.ischeck = true;
        this.selarr.push(item.val);
      } else {
        item.ischeck = false;
        this.selarr.splice(this.selarr.indexOf(index + 1), 1);
      }
      console.log(this.selarr);
    },

style:

.firsty {
	width: 180rpx;
	height: 60rpx;
	text-align: center;
	line-height: 60rpx;
	color: #333;
	font-size: 28rpx;
	border-radius: 8px;
	border: 1px solid #EEEEEE;
	margin-bottom: 20rpx;
}

.active {
	background-color: #61B1F3;
	color: #fff;
}