vue动态绑定style

1、对象写法

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

2、数组写法

<div :style="[{color:(index == 1 ? conFontColor:'#000')},{fontSize:'18px'}]"></div>

3、三元运算符写法

<!-- 写法一 -->
<div :style="[{float: id === '12' ? 'left:'right}]"></div>

<!-- 写法二 -->
<div :style="float: nameList.length === 20 ? 'height:64px' : 'height:32px' "></div>

<!-- 写法三 -->
<div :style="{border:( nameId ===item.id ?'2px solid #4C78FF': '2px solid red')}"></div>

4、data变量写法

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

<script>
export default {
    data() {
        return{
          styleObject: {
            color: '#000',
            fontSize: '14px'
          }  
        }
    }
}
</scrip>