{"hasRights": true,"amt": "0"
}
可以使用Vue的计算属性来实现这个需求。首先,在data中定义hasRights和amt两个属性,然后定义一个计算属性result,根据hasRights和amt的值来计算出对应的结果。
示例代码如下:
<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时直接返回***。最终,我们将计算出的结果渲染到模板中。
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 '***';}
});
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 '';
});
<span
:class="{'long-color': +row.profitRate >= 0,'short-color': +row.profitRate < 0
}"
>
{{ Math.round(row.profitRate * 10000) / 100 }}%
</span>