动态绑定 class 的几种实现方式 - Vue

日常开发中难免会遇到动态渲染修改样式的需求出现，So 简单归纳如下三种实现方式，虽然还是学时的时候有所了解但事后很久不在接触，此次重新初识前端不久，哪里可以更优还请大佬多多指教！

方式一：通过Class 与 Style 绑定的方式

即三目运算的判断方式设置样式，也是 Vue 官方推荐的方式，具体 code 实现如下：

html 代码片段

<button 
    type="button" 
    :disabled="btnDisabledState" 
    :class="[btnDisabledState ? 'btnDisabledStyle' : 'btnStyle']"            
    @click="arcExamPaper">点击抽题</button>

js 代码片段

<script>
    import ProjectEnviroment from "../../expand/define/ProjectEnviroment";
    import YHHttpRequestManage from "../../expand/network/YHHttpRequestManage";
    import { Toast } from "vant";
    export default { // 随机抽提
        name : "YHArcExamPaper",
        data() {
            return {
                btnDisabledState: false, // 按钮状态 - 初始设置
            }
        },
        methods: {
            arcExamPaper : function () {
                var urlLink = ProjectEnviroment.HostLink + ProjectEnviroment.ExtractRandomExam + '?eaid=' + this.eaid + '&stid=' + this.stid + '&eeid=' + this.eeid;
                YHHttpRequestManage.GetHttpRequestDataWithDefault(urlLink, true, true, {
                    success : data => {
                        if (1 === data.resCode) { // 成功
                            Toast.clear();
                            console.log(data);

                            this.btnDisabledState = true; // 按钮状态 - 禁止按钮点击事件 - 抽题成功
                        } else { // 异常
                            Toast(data.errMsg);
                        }
                    }
                });
            },
        }
    }
</script>

css 代码片段

<style scoped>
    @import "../../expand/utilityClass/ThemeStyleConfig.css";

    .btnStyle { // Basic Style
        background-color: #7EC16A;
        color: #ffffff;
        border: none;
        outline: none;
        text-align: center;
        font-size: 18px;
        font-weight: bold;
        height: 40px;
        width: 150px;
    }

    .btnDisabledStyle { // Disabled Style
        background-color: #F4F5F6;
        color: #ffffff;
        border: none;
        outline: none;
        text-align: center;
        font-size: 18px;
        font-weight: bold;
        height: 40px;
        width: 150px;
    }
</style>

方式二：基础样式与动态样式同时存在

<div v-bind:class="[btnStyle ,btnDisabledState ? btnDisabledStyle : '']"></div>

方式三：通过将 html 元素设置 id 的方式

该方式应该算是一个较为老套的方式，预先将对应的组件设置 id 唯一属性；
随后在按钮 js 的点击事件中获取到当前元素后对其样式进行修改；
即 document.getElementById("组件预先设置的 id 值").style.color="#F4F5F6"

以上便是此次分享的全部内容，希望能对大家有所帮助！