VUE 根据返回的状态动态修改样式

1,094 阅读1分钟

场景:根据后端返回的状态修改按钮的背景颜色

html

<div class="invoBtn" :style='{backgroundColor:colors[statusStr]}'>
  <p>{{statusStr}}</p> //statusStr:无需开票/开发票/发票开具中
</div>

js

data(){
 return{
  statusStr:'',
  colors: {
    '无需开票' : '#A4A4A4',
    '开发票' : '#FF9800',
    '发票开具中' : '#A4A4A4'
  } 
 }
}