今天在写vue弹窗组件时，需要弹窗出来时不能点击除了弹窗之外的组件，需要用到css属性 pointer-events:none;这就需要我们动态的添加class，vue中尽量不要用js来添加class属性，会导致有时候页面刷新不出来，所以就在这整理了vue常见的几种动态的添加class的方法
vue动态绑定class的方式
一、绑定单个class
html部分：
<div :class="{'active':isActive}"></div>
js部分：通过isActive来判断是否添加active
1. data() { 2. return { 3. isActive: true 4. }; 5. }
二、绑定多个class，需要逗号隔开
html部分：
<div class="activeOne" v-bind:class="{ activeTwo: isActive, 'activeThree': hasError }"></div>
js部分：判断是否绑定对应class
1. data() { 2. return { 3. isActive: true, 4. hasError: true 5. }; 6. }
三、绑定一个返回对象的计算属性
html部分：
<div :class="classObject"></div>
js部分:通过计算属性返回值来判断
export default { data() { return { isActive: true, }; }, computed: { classObject: function () { return { active: this.isActive, } } }
四、通过三元运算符来选择需要的class
html部分:
<div :class="[isActive?'active':'disActive']"></div>
js部分：
data() { return { isActive: false, }; },
