动态绑定style/class（三目运算符）

1. 动态绑定style

一般情况下使用style是这样的

<a-icon type="desktop" style="fontsize: 25px; color: red" />

1.1 绑定单个style

当我们需要根据不同的状态来动态改变style时，这里以color为例子，我们可以采用三目运算符来实现( : ? )

例如现在有三种状态，当状态为ok时让color为red，当状态为ok2时让color为blue，当状态为ok3时让color为green。

:style="{fontsize: '25px',color: item.statu == 'ok' ? 'red' : item.statu == 'ok2' ? 'blue' : 'green'}"

1.2 绑定多个style

:style="[{fontsize: '25px',color: item.statu == 'ok' ? 'red' : item.statu == 'ok2' ? 'blue' : 'green'},{height: !$route.meta.footer == true ? 'auto' : '100%'}]"

2. 动态绑定class

2.2 绑定单个class

一般情况下class是这样的

<a-icon type="desktop" class="deskTop1" />

同样的，我们也可以用三目运算符来动态选择我们所需要的不同的class。

<a-icon type="desktop" :class="[ item.statu == 'ok' ? 'deskTop1' : 'deskTop2' ]" />

2.2 绑定多个class

//需要判断多个是否都使用
<div class="activeOne" :class="{ activeTwo: isActive, activeThree: hasError }"></div>

data() {
    return {
      isActive: true,
      hasError: false
    };
}

//不需要判断多个是否都使用
<div :class="[activeTwo, activeThree]"></div>