vue 使用 :class 根据不同状态值设置状态文字颜色不同

1. 效果图

2. 主要代码

<li v-for="(item,index) in ticketList" :key="index" @click="changTicket(item)">
  <header>
    <span :class="[item.status== '0' ? 'orange': '', item.status=='1'? 'blue': '',item.status=='2'? 'green': '',item.status=='3'? 'green': '',item.status=='4'? 'green': '']">{{item.status | getStatus(item.status)}}</span>
  </header>
</li>

<script>
	export default {
		data() {
			return {
				// 模拟后端返回数据
				ticketList:[
					{status:0},
					{status:1},
					{status:2},
					{status:3},
					{status:4},
				]
			}
		},
		// 过滤器根据 status 返回状态文字
		filters:{
		    getStatus(key) {
		        let status = '';
		        switch (key) {
		            case 0:
		                status = "待分配"
		                break
		            case 1:
		                status = "待回复"
		                break
		            case 2:
		                status = "处理中"
		                break
		            case 3:
		                status = "已解决"
		                break
		            case 4:
		                status = "不需处理"
		                break
		        }
		        return status
		    }
		}
  },
</script>

 span {
	&.low {
	   background-color: #808080;
	 }
	 &.in {
	   background-color: #4ca0ff;
	 }
	 &.high {
	   background-color: #fb894f;
	 }
	 &.urgent {
	   background-color: #f95f62;
	 }
}