vue通过filters过滤参数动态绑定style文字样式，简单快捷明了

一碗热水狗

于 2021-12-02 11:33:20 发布

阅读量714

点赞数 1

本文链接：https://blog.csdn.net/m0_58360569/article/details/121670243

版权

本文介绍了如何使用Angular的ngStyle和filter功能，为任务优先级添加不同颜色样式，以直观展示任务级别。通过colorText过滤器，根据任务的'low', 'mid', 'high'状态动态返回对应颜色样式代码。

摘要由CSDN通过智能技术生成

直接上代码:

 <div>优先级：
        //通过参数绑定到style样式，然后再加上过滤器
      <span  :style="item.task|colorText">
           {{ item.task}}
      </span>
</div>

filters: {
    colorText(colorVal){
       //接收参数做判断（注意：item.task就是colorVal）
      if(colorVal=='low') {
        //return 相对应的颜色样式
        return "color:#6FEA10"
      }else if(colorVal=='mid'){
        return "color:#1890FE"
      }else if(colorVal=='high'){
        return "color:red"
      }
    },
},