vue动态添加style样式

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

• 对象形式

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

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

• 数组形式

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

• 三目(元)运算符形式

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

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

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

• 绑定data对象形式

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

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