vue 绑定类名class 之法

仍晓柳絮画中仙 不及佳人半分颜

:class可以和普通类名共存

<li v-for=" (item, i) in wpList" :key="i" class="list" :class="{active : active == item.name}" @click="courseVideoLi(item.name)">
       <div class="listLeftBox">
           <span class="num">{{ i < 10 ?'0' + i : i}}</span>
           <span class="title">正常人为什么看不出腹肌看不出腹肌？</span>
       </div>
       <span v-if="active != item.name" class="novideoPlayImgBox"></span> <!-- 未选中状态 -->
       <span v-if="active == item.name" class="videoPlayImgBox"></span> <!-- 选中状态 -->
   </li>

第一种方法
对象普通方式
对象里面可以写多个属性
<div :class="{ 'active': isActive }"></div>

data: {
    isActive: true
}

第二种方式
computed

<div :class="classes"></div>

data: {
    isActive: true,
    error: null
}
computed: {
    classes: function () {
        return {
            active: this.isActice && !this.error,
            'text-fail': this.error && this.error.type === 'fail'
        }
    }
}

第三种: 数组

<div :class="[{ 'active': isActive }, errorClass]"></div>

data: {
    isActive: true,
    errorClass: 'error'
}

computed

<button :class="classes"></button>

data: {
    size: 'large',
    disabled: true
}
computed: {
    classes: function () {
        return [
            'btn',
            {
                ['btn-' + this.size]: this.size !== '',
                ['btn-disabled']: this.disabled
            }
        ];
    }
}

三元表达式

<ul class="tabs">
    <li @click="change(1)" :class="flag===1?'active':''">选项一</li>
    <li @click="change(2)" :class="flag===2?'active':''">选项二</li>    
</ul>

data: {
    flag:1
},
methods:{
    change: function (num) {
        this.flag=num;
    }
}

再此附上我的QQ: 2489757828 有问题的话可以找我共同探讨
我的私人博客: 李大玄