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>

打完收工！