Vue 下拉列表动态数据修改样式 iviewUI实现

在Vue官方文档中介绍到使用v-bind对Class与Style进行绑定（查阅Vue文档

  
    
      {{ item.label }}
  

.....
data() {
  return {
    transactionTypes: [
      { value: "blue", label: "不重要" },
      { value: "yellow", label: "一般重要" },
      { value: "orange", label: "比较重要" },
      { value: "red", label: "特别重要" }
    ]
  }
}

效果

然后参考iviewUI的文档进行美观一下（查阅iviewUI下拉列表文档

  
    
      {{ item.label }}
      
        
      
    
  

......
data() {
  return {
    transactionTypes: [
     { value: "#2db7f5", label: "不重要" },
     { value: "#19be6b", label: "一般重要" },
     { value: "#ff9900", label: "比较重要" },
     { value: "#ed4014", label: "特别重要" }
    ]
  }
}

美观后