项目中会需要动态添加 style 行内样式，现指出常用的几种方式。
注意:
1、凡是有 - 的style属性名都要变成驼峰式，比如font-size要变成
fontSize。2、除了绑定值，其他的属性名的值要用引号括起来，比如
fontSize:'14px'而不是fontSize:14px。
对象形式
//html
<div :style="{ color: '#333', fontSize: '14px' }"></div>数组形式
//html
<div :style="[baseStyles, overridingStyles]"></div>
data(){
return {
baseStyles: {
width: '100px',
height: '100px'
},
overridingStyles: {
background: 'red',
height: '200px'
}
}
}
三目运算符形式
//html
<div :style="{background:index===0 ? '#FFFFFF' : '#000000'}"></div>
<div :style="[{color:index==0 ?'#333':'#000'},{fontSize:'14px'}]"></div>
绑定计算属性
//html
<div :style="setIconStyle"></div>
computed：{
//动态设置样式
etIconStyle() {
return 'color: #333; fontSize: 14px'
}
}文章来源：https://www.toymoban.com/news/detail-854671.html
通过条件绑定样式
//html
<div :style="setIconStyle(index)"></div>
computed：{
//动态设置样式
etIconStyle() {
return function (index) {
return index===0 ? 'color: #333' : 'color: #000'
}
}
}文章来源地址https://www.toymoban.com/news/detail-854671.html
多重值(浏览器会根据运行支持情况进行选择)
//html
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>到了这里，关于vue动态绑定style样式之动态添加style样式的多种写法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
