22 内联样式的绑定
一般语法
内联样式的绑定，与class绑定一样，vue同样做了基于对象绑定与数组绑定的优化。
例如，一般基于表达式内联样式这样声明：
<!-- 一般语法 -->
<div v-bind:style="`color: ${activeColor}; font-size: ${fontSize}px;`">{{message}}</div>
对象绑定
基于模板字符串，代码还不算太混乱。如果使用使用对象绑定的语法：
<!-- 对象语法 -->
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">{{message}}</div>
反而不是特别直接了。因为对象的键名不能有连字符，所以在内联style对象绑定的语法里，特意使用驼峰式（camelCase）变量全名法，替换了短横线分隔式（kebab-case），这使得样式名不直观了。
还有一种写法，直接用短横线分隔式，将style名称加个引号使用：
<div v-bind:style="{ color: activeColor, 'font-size': fontSize + 'px' }">{{message}}</div>
对于中间没有连字符的，如color，不用加单引号。
以上三种写法，渲染效果是一样的：
数组绑定
还有一种是数组绑定的方式：
<!-- 数组语法 -->
<div v-bind:style="[baseStyles,baseStyles2]">{{message}}</div>
...
data: ()=>({
baseStyles:{
'font-size': '40px',
color:'blue'
},
baseStyles2:{
'line-height': '20px',
'background-color':'gray'
}
}),
样式数组绑定的含义与class数组绑定的含义不大一样。此处是将多个样式对象，拼合合并成一个样式对象。
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2020-01-18，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
