v-for循环，根据后台返回数据设置每个div背景颜色

需求：根据后台返回数据，设置此状态下的div相对应的颜色。

第一步：获取后台数据（我现在是做的假数据，自己写的数组siteNum）

第二步：判断当前状态，item.spare如果是1，就显示第一个盒子，且背景色为col1样式

第三步：p标签展示状态时，直接写数字代表的文字状态就可以了，因为显示某个盒子的时候已经判断过了

// 这是顶部标识部分
<div class="orderfour">
    <div class="orderfour1">
        <span class="span1 spare"></span>
        <span class="sparetext">空闲{{ spare }}桌</span>
    </div>
    <div class="orderfour1">
        <span class="span1 reserve"></span>
        <span class="sparetext">预定{{ reserve }}桌</span>
    </div>
    <div class="orderfour1">
        <span class="span1 use"></span>
        <span class="sparetext">使用{{ use }}桌</span>
    </div>
    <div class="orderfour1">
        <span class="span1 stop"></span>
        <span class="sparetext">停用{{ stop }}桌</span>
    </div>
</div>
// 这是循环得到的div盒子列表
<div class="orderbottom">
    <div v-for="(item, index) in siteNum" :key="index">
        <div class="ordersite col1" v-if="item.spare == '1'" @click="showInfo(item.id)">
                <p class="text1">{{ item.id }}</p>
                <p class="text2">空桌</p>
        </div>
        <div class="ordersite col2" v-if="item.spare == '2'" @click="showInfo(item.id)">
                <p class="text1">{{ item.id }}</p>
                <p class="text2">预定</p>
        </div>
        <div class="ordersite col3" v-if="item.spare == '3'" @click="showInfo(item.id)">
                <p class="text1">{{ item.id }}</p>
                <p class="text2">使用</p>
        </div>
        <div class="ordersite col4" v-if="item.spare == '4'" @click="showInfo(item.id)">
                <p class="text1">{{ item.id }}</p>
                <p class="text2">停用</p>
        </div>
    </div>
</div>

data() {
    return {
        siteNum: [
            {
                id: "A1",
                spare: "1",
                info: {
                    cate: "0",
                    catename: [],
                    price: "99",
                },
            },
            {
                id: "A2",
                spare: "2",
                info: {
                    cate: "9",
                    catename: ["鱼翅","可乐鸡翅","丸子","烤肉","火锅","烤鸡","部队火锅","炸鸡","汉堡"],
                    price: "299",
                },
            },
            {
                id: "A3",
                spare: "1",
                info: {
                    cate: "0",
                    catename: [],
                    price: "99",
                },
            },
            {
                id: "A4",
                spare: "3",
                info: {
                    cate: "3",
                    catename: ["红烧肉", "火锅", "烤肉"],
                    price: "99",
                },
            },
            {
                id: "A5",
                spare: "1",
                info: {
                    cate: "0",
                    catename: [],
                    price: "99",
                },
            },
            {
                id: "A6",
                spare: "4",
                info: {
                    cate: "0",
                    catename: [],
                    price: "99",
                },
            },
        ],
    };
},

效果图：

再顺便贴一下样式吧：

.orderfour {
    margin-left: 20px;
    display: flex;
    justify-content: flex-start;
    // 设置不换行，这样不会导致‘空闲0桌’和其他标识 换行
    white-space: nowrap;
    .orderfour1 {
        height: 26px;
        line-height: 26px;
        margin-right: 30px;
        .span1 {
            // 行内块元素设置宽高生效
            display: inline-block;
            // 相对定位，是对父级元素的
            position: relative;
            top: 3px;
            left: 5px;
            width: 14px;
            height: 20px;
            margin-right: 10px;
        }
        .sparetext {
            font-size: 20px;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #666666;
        }
        .spare {
            background-color: #ffffff;
            border: 1px solid rgba(179, 178, 178);
        }
        .reserve {
            background-color: #fc8452;
        }
        .use {
            background-color: #ee6666;
        }
        .stop {
            background-color: #999999;
        }
    }
}
.orderbottom {
    background-color: #ffffff;
    display: flex;
    flex-wrap: wrap;
    .ordersite {
        width: 220px;
        height: 300px;
        border-radius: 10px 10px 10px 10px;
        opacity: 1;
        border: 1px dashed #707070;
        margin: 25px;
        text-align: center;
        .text1 {
            font-size: 40px;
            font-family: Microsoft YaHei-Bold, Microsoft YaHei;
            font-weight: bold;
            color: #666666;
            margin-bottom: 0;
        }
        .text2 {
            font-size: 20px;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #666666;
        }
    }
    .col1 {
        background-color: #ffffff;
    }
    .col2 {
        background-color: #fc8452;
    }
    .col3 {
        background-color: #ee6666;
    }
    .col4 {
        background-color: #999999;
    }
}