vue 动态绑定style class

绑定style

<!-- 基本使用 -->
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }">基本使用</div>

<!-- 数组 -->
<div :style="styleArr">123</div>

<div :style="[astyle, bStyle]">123</div>

<div :style="[{display:(activeName=='first'?'flex':'none')},{fontSize:'20px'}]">123</div>

data () {
  return:{
    styleArr: [
        {
          fontSize: '30px',
          color: '#ff0000'
        },
        {
          fontStyle: 'italic'
        }
    ],
    astyle: {
      color: 'red',
      fontSize: '20px'
    },
    bStyle: {
      background: '#00BC9C'
    }
  }
}

<!-- 三目运算符 -->

<div :style="{ color : (index === 0 ? conFontColor : '#ddd')}"></div>

<div :style="[{color:(index==0?conFontColor:'#ddd')},{fontSize:'22px'}]"></div>

绑定class

<!-- 基本使用 -->
<div :class="active">基本用法</div>
<!-- 普通对象方式 -->
<h1 :class="{'success':isSuccess}">普通对象方式 !</h1>
<h1 :class="{'success': aStyle === 'a' }">hello world !</h1>

<!-- 可以控制多个 -->
<h1 :class="{'success':isSuccess,'backgroundStyle':addBackground}">hello world !</h1>


<!-- 数组三元运算符方式 -->
<h1 :class="[isSuccess ? 'success' : 'error' ]">数组方式三元运算符!</h1>
<h1 :class="[isSuccess ? 'success' : 'error', 'abc' ]">数组方式三元运算符!</h1>

<!-- 数组与对象结合，前面对象里的第一个参数可以不带引号 -->
<h1 :class="[{success:isSuccess},'backgroundStyle']">数组对象结合!</h1>