vue 中实现当hasrights为true时处理amt字段，大于0返回+0，小于0返回-0，当hasrights为false时返回***

JackieDYH2023-07-20 11:31

javascript 复制代码

{
    "hasRights": true,
    "amt": "0"
}

可以使用Vue的计算属性来实现这个需求。首先，在data中定义hasRights和amt两个属性，然后定义一个计算属性result，根据hasRights和amt的值来计算出对应的结果。

示例代码如下：

javascript 复制代码

<template>
  <div>{{ result }}</div>
</template>

<script>
export default {
  data() {
    return {
      hasRights: true,
      amt: "100"
    };
  },
  computed: {
    result() {
      if (this.hasRights) {
        const num = Number(this.amt);
        return num > 0 ? `+${num}` : `- ${Math.abs(num)}`;
      } else {
        return "***";
      }
    }
  }
};
</script>

在这个示例中，我们使用了三元表达式来判断amt的正负情况，并根据情况加上对应的符号。当hasRights为false时直接返回***。最终，我们将计算出的结果渲染到模板中。

javascript 复制代码

const formatValue = computed(() => (val) => {
  // if (+val > 0) return `+${val}`;
  // if (+val < 0) return `${val}`;
  // return val;
  if (val.hasRights) {
    if (+val.amt > 0) return `+${val.amt}`;
    if (+val.amt < 0) return `-${Math.abs(val.amt)}`;
    return val.amt;
  } else {
    return '***';
  }
});

or

// 过滤器
const formatValue = computed(() => (val, flag) => {
  if (val == undefined) return '-';
  if (val?.hasRights) {
    switch (flag) {
      case 'zf':
        if (+val.amt > 0) return `+${val.amt}`;
        if (+val.amt < 0) return `-${Math.abs(val.amt)}`;
        return val.amt;
        break;
      case 'zfb':
        if (+val.amt > 0) return `+${Math.round(val.amt * 10000) / 100}%`;
        if (+val.amt < 0)
          return `-${Math.round(Math.abs(val.amt) * 10000) / 100}%`;
        return `${val.amt}%`;
        break;
      case 'zcb':
        return `${Math.round(val.amt * 10000) / 100}%`;
        break;

      default:
        return val.amt;
        break;
    }
  } else {
    return '***';
  }
});

javascript 复制代码

const ratePrefix = computed(() => (val) => {
  if (+val > 0) return `+${Math.round(val * 10000) / 100}%`;
  if (+val < 0) return `-${Math.round(Math.abs(val) * 10000) / 100}%`;
  return '';
});

javascript 复制代码

<span
:class="{
  'long-color': +row.profitRate >= 0,
  'short-color': +row.profitRate < 0
}"
>
{{ Math.round(row.profitRate * 10000) / 100 }}%
</span>