三元运算符---class及style的运用

言666

已于 2024-04-09 16:10:42 修改

阅读量568

点赞数 1

文章标签：前端 javascript html vue.js

于 2024-04-02 17:41:28 首次发布

本文链接：https://blog.csdn.net/qq_58307541/article/details/137278779

版权

本文详细介绍了如何在HTML中使用三元运算符动态设置class和style属性，以根据数据条件渲染不同样式。例如，根据风险类型显示不同颜色，以及实现数字过滤功能。

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

三元运算符---class及style的运用

1.style

<span 
    id="fund-tag"
    :class="[scope.row.risktype == 'R1' ? 'active1' : scope.row.risktype == ('R2' || 'R3' || 'R4') ? 'active2' : scope.row.risktype == 'R5' ? 'active3' : '']">
       {{ scope.row.risklevel }}
</span>

2.style

<span class='sTop' :style="{ color: Number(o.comparedPre > 0) ? '#F91E1E' : Number(o.comparedPre < 0) ? '#00A20F' : '' }">{{o.comparedPre | filterData}}</span>

//数字过滤
 filters: {
    filterData (data) {
      return data === undefined || data === null || data === '-' ? '-' : data + '%'
    }
  },