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

news/2024/10/21 7:32:39/
{"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>


http://www.ppmy.cn/news/966417.html

相关文章

chatGPT对大学生来说有什么利好?

大学生可以利用ChatGPT进行以下方面的应用&#xff1a; 作为一个辅助工具&#xff0c;使用ChatGPT来生成论文题目、摘要和参考文献等&#xff0c;提高写作效率和质量。 在学习过程中&#xff0c;可以使用ChatGPT来生成笔记、练习题和测试题目&#xff0c;帮助记忆和巩固知识点。…

直流电源与交流电源的区别有哪些

以12V直流电源和12V交流电源为例&#xff0c;从损耗、使用、测量、安全等几个方面来分析直流与交流电源的区别。 损耗 直流电的传输损耗大,所以不适合长距离传输, 交流电的传输损耗小,所以适合长距离传输, 使用 直流电电压稳定,无白躁声,故适於电子产品使用(例如电视机,收音机…

《花雕学AI》21:ChatGPT能否应对脑筋急转弯?逻辑推理和创造性思维的大考验!

当我们谈到脑筋急转弯时&#xff0c;很多人都会感到兴趣和好奇。脑筋急转弯是一种智力游戏&#xff0c;可以锻炼我们的思维能力以及解决问题的能力。然而&#xff0c;对于许多人来说&#xff0c;脑筋急转弯也是一项相当具有挑战性的任务。在这个过程中&#xff0c;我们需要运用…

chatGPT真的完美吗?“翻车”现场频发,它的智商是9岁小孩儿?

前面我们说到&#xff0c;一款基于chatGPT的插件【Merlin】&#xff0c;聊天式感受强大AI能力 &#xff0c;在我们惊呼chatGPT强大能力的时候&#xff0c;它就真的很完美吗&#xff1f; NO&#xff01;&#xff01; 尽管已经chatGPT已经开始进入商用阶段&#xff0c;各大互联…

智商狂飙,问了ChatGPT几个数据库问题后,我的眼镜掉了

最近&#xff0c;ChatGPT火爆全网&#xff0c;介绍其产品、公司、作者、技术和应用等方面信息&#xff0c;占据着整个互联网&#xff0c;似乎不谈GPT好像就落伍了。作为一个关注数据库行业的公众号&#xff0c;我们问了GPT几个数据库问题&#xff0c;结果让人大跌眼镜&#xff…

大数据学习路线

文章目录 一&#xff0c;Hadoop二&#xff0c;MapReduce三&#xff0c;HDFS四&#xff0c;Hive 一&#xff0c;Hadoop 二&#xff0c;MapReduce 三&#xff0c;HDFS 四&#xff0c;Hive Hive学习

数字人+ChatGPT强强联手能擦出什么火花?

随着元宇宙概念的快速发展&#xff0c;以数字人ChatGPT为形式的创作方式正在颠覆传统视频创作方式&#xff0c;并在市场上呈现快速增长的态势。根据新榜的报道&#xff0c;目前已经有多位大V使用虚拟数字人来协助完成短视频制作&#xff0c;并且值得一提的是&#xff0c;这些视…

UI设计如何结合AIGC工具?轻松设计出彩的UI界面

大家好。我是不知名设计师 l1m0_&#xff0c;今天分享内容为&#xff1a;UI设计如何结合AIGC工具发挥“奇”效。文中我会针对UI设计的流程和几款人工智能AI工具的功能&#xff0c;来向大家进行介绍AIGC如何在这个过程中发挥作用。对UI设计和AI工具感兴趣的朋友一定不能错过&…