vue动态添加style样式

  在开发项目时，可能会需要动态添加 style 行内样式，那如何动态地添加style样式呢？下面就说说几种方法：

1. 对象形式

:style="{ fontSize: fontSize + 'px' }"

:style="{color:( number==0?fontColor:'#000')}"

2. 数组形式

:style="[baseStyles, otherStyles]"
 
:style="[{color:(number==0?fontColor:'#000')},{fontSize:'25px'}]"

3. 三目(元)运算符形式

:style="{color:(number==0?fontColor:'#000')}"
 
:style="[{color:(number==0?fontColor:'#000')}]"

4. 多重值形式(根据浏览器内核情况进行选择)

:style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"

5. 绑定data对象形式

:style="needStyle"
 
data() {
    return{
      needStyle: {
        color: 'blue',
        fontSize: '16px'
      }  
    }
}

注意：
  1. 凡是css中有 - 的style属性名都要变成驼峰式，比如font-size要变成fontSize、background-color要变成backgroundColor。
  2. 除了绑定值，其他的属性名的值要用引号括起来，比如backgroundColor: '#00a2ff'，而不是 backgroundColor: #00a2ff。