vue 中实现当hasrights为true时处理amt字段,大于0返回+0,小于0返回-0,当hasrights为false时返回***
{
"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>
本文来自博客园,作者:JackieDYH,转载请注明原文链接:https://www.cnblogs.com/JackieDYH/p/17634015.html
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现