关于vue绑定class属性

这里是想制作一个根据不同的事情紧急程度改变其前面圆环的颜色来达到表现不同的紧急程度
数据库如下：

Urgengy表示紧急程度，分为三类：紧急，轻松，和较紧急

<van-icon name="circle" @click="deltask(value.roomid)" :class="{
            A:value.Urgency == 3,
            B:value.Urgency == 2,
            c:value.Urgency == 1
          }"/>

通过绑定不同类型（其内部是一个数组，当循环进行时，会根据不同的value值来进行判断其使用那种类名，猜想其内部应该是封装了一个v-if函数，当传入数组时就激活进行判断）

.A{
    color: red;
}

.B{
    color: rgb(0, 102, 255);
}

.c{
    color: rgb(0, 255, 0);
}

实现效果如下

维修员完整代码

<template>
  <div class="body">

    <div class="line">

    </div>
    <div class="top">
      <div class="left" @click="back()">
        <div class="lefticon">{{lefticon}}</div>
        <div class="lefttxt">{{lefttxt}}</div>
      </div>
      <div class="title">{{title}}</div>
    </div>

    <div class="reject" v-show="isstart">
      <div class="repid">
        <div>工号:</div>
        <input type="text" v-model="repid">
      </div>
      <div class="buildid">
        <div>楼层号:</div>
        <input type="text" v-model="dormid">
      </div>
        <input type="button" value="进入" class="start" @click="start()">
      </div>

    <div class="centent" v-show="!isstart" v-for="value,index in task" :key='value._id'>
      <div class="tasktitle" >
        <div class="tasktitleleft">{{index+1}}</div>
        <div class="tasktitleicon">
          <van-icon name="circle" @click="deltask(value.roomid)" :class="{
            A:value.Urgency == 3,
            B:value.Urgency == 2,
            c:value.Urgency == 1
          }"/>
        </div>
        <div class="tasktitleright">
          <div @click="show()">{{value.tasks.title}}</div>
          <div class="taskdetails" v-show="isshow">
            <div class="roomid">
              <div>宿舍号:</div>
              <div>{{value.roomid}}</div>
            </div>
            <div class="roomtask">
              <div>{{value.tasks.task}}</div>
            </div>
          </div>
        </div>
      </div>
      
    </div>
  </div>
</template>

<script>

export default {
    name:'repairman',
    data() {
      return {
        title:'修理任务',
        lefticon:'<',
        lefttxt:'返回',
        isstart:true,
        dormid:'1',
        repid:"478",
        task:[],
        isshow:false,
        urgent:'',
      }
    },
    methods: {
      back(){
        this.$router.push('/indexlogin')
      },
      start(){
        if((this.repid == '')&&(this.dormid == '')){
          alert('请输入工号和楼号')
        }else{
          this.$axios({
          method:'get',
          url:'/getrepdata',
          params:{
            dormid:this.dormid,
            repid:this.repid
          }
          }).then(res=>{
            this.task = res.data
            this.isstart = false
            // console.log(this.task)
          })
        }
      },
      show(){
        this.isshow = !this.isshow

      },
      deltask(id){
        this.$axios({
          method:'post',
          url:'/deltask',
          data:{
            roomid:id
          }
        }).then((res)=>{
          this.$router.go(0)
        })
      }
    },
}

</script>

<style>
  @import url('../../assets/css/repairman.css');
</style>

*{
    margin: 0;
    padding: 0;
}


.topbuttoncontent{
    overflow: hidden;
    text-align: center;
}


.topbuttoncontent .firstbutton{
    float: left;
    background-color:rgb(255, 157, 76);
    width: 2.4rem;
    height: .8rem;
    border: none;
    font-family: '楷体';
    font-size: .33rem;
    color: rgb(4, 128, 128);
    margin-top: 0 auto;
    margin-left: .1rem;
    margin-bottom: .1rem;
    border-radius: .08rem;
    margin-top: .04rem;
}

.topbuttoncontent .firstbutton:hover{
    box-shadow: 3px 3px 10px rgba(48, 48, 48, 0.555);
}

.falseshow{
    /* 检测组件大小 */
    
    width: 8rem;
    height: 6rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);

}

.falseshow .van-field__control{
    font-size: .33rem;
}

.falseshow .van-button{
    font-size: .33rem;
    height: 1rem;
}

.van-tab {
    font-size: .23rem;
    
}


.chargebody .imgA{
    /* 检查样式是否执行 */
    /* background-color: red;
    width: 8px;
    height: 8px; */
}

.chargebody .imgB{
    /* background-color: blue;
    width: 8px;
    height: 8px; */
}