vue---属性绑定:多个if/class/style

我们在做VUE项目开发的时候，经常会遇到需要绑定多个判断条件，多个class，多个style的情况，下面就整理一下：

一、绑定多个判断条件

1、绑定一个判断条件

<div v-if="isActive"></div>
<div v-if="condition === 0"></div>
<div v-if="condition === 0 || condition === 1"></div>
<div v-if="[0,1,2].includes(condition)"></div>

2、绑定方法进行判断

<div v-if="isActive(condition)"></div>

二、绑定多个class

1、绑定一个类名

 <div :class="{'active':isActive}"></div>

或三元表达式：

<div :class="isActive ? 'active' : ''"></div>

2、绑定两个类名

<div :class="{'active':isActive,'hover':isHover}"></div>

实际使用：

<div :class="{'group':x.type == 2,'moreten':x.unread >= 10}"></div>

3、绑定数组

<div :class="[activeClass, errorClass]"></div>

data() {
    return {
        activeClass: "active",
        errorClass: "disActive"
    };
}

4、可以是数组和对象的组合

<div :class="[isback,{'isLike':likeClass}]"></div>

5、绑定数据对象

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

export default {
  data() {
    return {
        isActive: true,
    };
  },
  computed: {
  classObject: function () {
    return {
      active: this.isActive,
    }
  }
}

三、绑定多个style

 1、绑定一个style

<div :style="{color:'red','font-size':'40px'}"></div>

2、绑定一个对象

<div :style="styleObj"></div>

data(){
    styleObj: {'color':'red','font-size':'20px'}
}

3、绑定多个样式

<div :style='[styleObj1, styleObj2]'></div>

4、判断条件

<div :style="isStyle ? styleObj : ''"></div>

打完收工！