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;
  }
}

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

Logo

前往低代码交流专区

更多推荐