项目中会需要动态添加 style 行内样式，现指出常用的几种方式。

注意:

1、凡是有 - 的style属性名都要变成驼峰式，比如font-size要变成fontSize。

2、除了绑定值，其他的属性名的值要用引号括起来，比如fontSize:'14px'而不是 fontSize:14px。

对象形式

//html

数组形式

//html
data(){return {baseStyles: {width: '100px',height: '100px'},overridingStyles: {background: 'red',height: '200px'}}
}

三目运算符形式

//html

绑定计算属性

//html
computed：{
//动态设置样式
etIconStyle() {return 'color: #333; fontSize: 14px'}
}

通过条件绑定样式

//html
computed：{
//动态设置样式
etIconStyle() {return function (index) {return index===0 ? 'color: #333' : 'color: #000'}}
}

多重值(浏览器会根据运行支持情况进行选择)

//html

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！