Question: I used CSS utility classes for building components in VueJS. The problem I ran into was that I wanted to apply classes only when certain conditions are met, i.e. style the component slightly differently based on its state. This caused me to check the condition repeatedly – once per class I want to apply. Is there a better way, e.g. applying all classes together after checking once?

TypeScript/JavaScript:

    export default Vue.extend({
        data() {
            return {
                isActive: false,
            };
        },
        computed: {
            componentClasses() {
                return ["margin-4", "padding-3", {
                    "color-red": this.isActive,
                    "font-size-30": this.isActive,
                    "font-weight-700": this.isActive,
                }];
            }
        }
    });