Vue 中的样式动态绑定

Vue 中的样式动态绑定

废话不多说，反正就这些写法（不要只关注 class 的动态绑定，当 style 有多个样式时，用逗号隔开）

<div :style="`background: url(${background1})`">
<div :style="{background: color === '' ? 'red' : 'blue'}">
<div :style="{background: `url(${background1})`}">
<div :style="{color,width:size+'px',height:size+'px'}">
<div :style="{'color': getColor()}">
<div :class="$route.fullPath.includes('/home') ? 'homeTop' : 'othersTop'">
<div :class="{eachTitle: activePath === item.path(即这里写一个true/false)}">
<div :class="{active: isActive}">
<div :class="['hello', number <= num ? 'active' : '']">
<div :class="'status' + item.status">

backgroundColor或'backround-color'

链接：https://cn.vuejs.org/v2/guide/class-and-style.html

注意：!important 比 行内样式 优先级大

追加