项目中会需要动态添加 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'}}
通过条件绑定样式
//html<div :style="setIconStyle(index)"></div>computed:{//动态设置样式etIconStyle() {return function (index) {return index===0 ? 'color: #333' : 'color: #000'}}}
多重值(浏览器会根据运行支持情况进行选择)
//html<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>