vue :class 可以接收 字符串 数组 和 对象 对象里面的key值 根据true或false 显示不显示

vue :class 可以接收 字符串 数组 和 对象 对象里面的key值 根据true或false 显示不显示

https://cn.vuejs.org/v2/guide/class-and-style.html

 

html部分 注意:class

<component :is="tagName" :class="classes" :disabled="disabled" @click="handleClickLink" v-bind="tagProps">
        <Icon class="ivu-load-loop" type="ios-loading" v-if="loading"></Icon>
        <Icon :type="icon" :custom="customIcon" v-if="(icon || customIcon) && !loading"></Icon>
        <span v-if="showSlot" ref="slot"><slot></slot></span>
    </component>

 

代码部分

computed: {
            classes () {
                return [
                    `${prefixCls}`,
                    `${prefixCls}-${this.type}`,
                    {
                        [`${prefixCls}-long`]: this.long,
                        [`${prefixCls}-${this.shape}`]: !!this.shape,
                        [`${prefixCls}-${this.size}`]: this.size !== 'default',
                        [`${prefixCls}-loading`]: this.loading != null && this.loading,
                        [`${prefixCls}-icon-only`]: !this.showSlot && (!!this.icon || !!this.customIcon || this.loading),
                        [`${prefixCls}-ghost`]: this.ghost
                    }
                ];
            },

 

第一个和第2个 肯定显示 后面对象里面就是true的显示 这个class

false的就不显示这个class