#vue# 使用JS进行状态判断，并追加类名样式

需求：在很多情况下，我们需要做切换状态就会显示不同的样式

效果：例如像下面的图（按钮）一样，不同的状态下，方框里显示不同的背景颜色

 

 思路：（1）首先我们需要进行排版，排出一个按钮的样式，再写出3个背景颜色的样式

（2）通过接入数据接口，以及追加样式

（3）再写Js函数方法

<template>
     <button class="live-state" 
      :class="liveBackClass(item.live_status)" > 
     //item.live_status是数据接口数据来的
    //绑定一个函数方法，然后将拿到的状态码，进行传入
            {{ item.live_status | getStatusText }}
     </button>
</template>

<script>
import { liveList,recordList, recordShow } from '@/model/teacher/index';
import backplayItem from '@/components/backplay-item/index'
const eduModal = () => import('@/components/edu-modal/index')
import _ from '@/assets/js/utils'
export default {
    name: "index",
    components: {
        backplayItem,
        eduModal
    },
    data () {
       
    },
    methods:{
        liveBackClass(status) {  
            switch (status) { 
                case 1: // case就是后端数据里面，对于status状态的区分 
                    return "live-state-no-start"; // 这个就是传入状态以后，追加的样式
                case 2: 
                    return "live-state-ing";
                case 3:
                    return "live-state-end";
            }
        }
    },

    }
}
</script>
<style>
    .live-state { //先写出一个公共的样式，不要写背景颜色
    width: .56rem;
    height: .24rem;
    border-radius: 5px;
    line-height: .24rem;
    font-size: 14px;
    font-family: SourceHanSansSC-Regular, SourceHanSansSC;
    font-weight: 400;
    color: #FFFFFF;
    margin-top: 12px;
    margin-left: 20px;
 }

//下面三个是追加的样式

.live-state-no-start{
    background-color: #797979;
}
.live-state-ing{
    @extend .edu-active-bg-color;
}
.live-state-end{
    background-color: #979797;
}
</style>