vue动态添加style的样式

vue在动态添加style样式的时候，有以下注意点
1.凡是有-的style属性名都要变成驼峰式，比如font-weight,需要写成fontWeight
2.除了绑定值，其他属性名的值要用引号括起来，比如width：‘75px’,不要忘记引号
3.动态绑定时，属性值和属性名要用大括号括起来。
【对象】

:style="{width: activeWidth, fontSize: fontSize + 'px' }"

【数组】

 :style="[{height:(warnData.length > 0?'calc(100% - 54px - 42px)':'calc(100% - 54px)')},{color:'#fff'}]"

【三目运算符】
单个属性

  :style="{height:(warnData.length > 0?'calc(100% - 54px - 42px)':'calc(100% - 54px)')}"

多个属性

  :style="[{height:(warnData.length > 0?'calc(100% - 54px - 42px)':'calc(100% - 54px)')},{color:'#fff'}]"

【多重值】
此时，浏览器会根据运行支持情况进行选择

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

【绑定data对象】

:style = "activeStyle"

data() {
  return {
	activeStyle:{
	  color: '#fff',
	  fontSize: '13px'
	}
  }
}

参考文章：https://blog.csdn.net/weixin_30736301/article/details/100093744