vue中动态添加class类名(对象形式)以及数据更新试图不更新问题

1、项目中比较常用的就是点击某个高亮，如：

:class="{'active': activeTab === index}"

2、突然遇到比较复杂的需求，比如根据客户类型展示不一样的样式（有很多种客户类型，每个都不一样）

以前百度看到有很多种方法，都没有一一去尝试，直到自己需要用的时候才…
（想起流浪地球— 起初没有人在意这场灾难，直到它和每个人息息相关）
哈哈…

 <div class="evaluateLi_cusType_common" :class="{'evaluateLi_cusType': item.cusTypeName === 201, 'evaluateLi_cusType1': item.cusTypeName === 202, 'evaluateLi_cusType2': item.cusTypeName === 100, 'evaluateLi_cusType3': item.cusTypeName === 101, 'evaluateLi_cusType4': item.cusTypeName === 102}" >
    <span class="evaluateLi_cusType_txt">{{item.cusTypeName | cusType}}</span>
</div>

//  :class="{'evaluateLi_cusType': item.cusTypeName === 201, 'evaluateLi_cusType1': item.cusTypeName === 202}"

.evaluateLi_cusType {
 background: #FB9072;
}
.evaluateLi_cusType1 {
  background: #857efa;
}
.evaluateLi_cusType2 {
  background: #fade7e;
}
.evaluateLi_cusType3 {
  background: #6cddda;
}
.evaluateLi_cusType4 {
  background: #8091df;
}

3、根据后台返回的客户类型，用对象的形式给每个类型添加不一样的类名

4、不是响应式的数据，即自己添加的数据。遇到数据改变了，试图不更新问题(多选功能)：

<li v-for="(item, index) in list" :key="item.id" class="editContent_li" :class="{'isCheck': item.check, 'isDefault': item.system == 1}" @click="handleCheck(index)">
  <!-- <div class="checkImg">
    </div> -->
  <img src="../../../../assets/img/checked.png" class="itemImg" alt="">
  <span class="editContent_txt">{{ item.name }}</span>
</li>

5、注意：后台是没有返回属性check的，说明一下：system 等于1是默认选中，不能修改，check是用于可以操作选中或者不选中（所以需要自己添加check属性）

// 请求数据
async getData() {
  let res = await this.$http(this.$url.GET_DEVICE_LOG_TYPE_DATA, 'get')
  if(res.data.code == 200) {
    this.list = res.data.data;
    // 除了默认的，全部都是为未选中
    this.list.forEach(item => {
      item.check = false;
    })
  }
},
// 选中
handleCheck(index) {
	this.list[index].check = !this.list[index].check;
},

6、发现试图不更新（数据已经改变了），使用$set方法，完整代码，包含样式

<li v-for="(item, index) in list" :key="item.id" class="editContent_li" :class="{'isCheck': item.check, 'isDefault': item.system == 1}" @click="handleCheck(index)">
  <!-- <div class="checkImg">
    </div> -->
  <img src="../../../../assets/img/checked.png" class="itemImg" alt="">
  <span class="editContent_txt">{{ item.name }}</span>
</li>

handleCheck(index) {
  if(this.list[index].check) {
    this.list[index].check = false;
   this.$set(this.list, index, this.list[index]);
  } else {
    this.list[index].check = true;
     this.$set(this.list, index, this.list[index]);
  }
},
async getData() {
  let res = await this.$http(this.$url.GET_DEVICE_LOG_TYPE_DATA, 'get')
  if(res.data.code == 200) {
    this.list = res.data.data;
    // 除了默认的，全部都是为未选中
    this.list.forEach(item => {
      item.check = false;
    })
  }
},

.editContent_li {
  position: relative;
  color: #4E4E4E;
  padding: 4px 12px;
  margin-right: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  margin-bottom: 10px;
  cursor: pointer;
  .itemImg {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 10px;
    height: 10px;
    border-radius: 0px 5px 0px 0px;
    background: #fff;
  }
}
.isCheck {
  color: #2087FF;
  border-color: #2087FF;
  .itemImg {
    background: #2187ff;
  }
}
.isDefault {
  color: #2087FF;
  border-color: #2087FF;
  cursor: not-allowed;
  .itemImg {
    background: #2187ff;
  }
}

志在山巅的攀登者，不会陶醉于沿途的脚印！