讨论一个指标是否达标的算法问题。
情景是这样的，我们首先设定指标的目标，分为基准目标和奋斗目标。
但还有一个因素要考虑，就是有些指标是越大越好，有些是越小越好的。
（取决是指标目标的设定，奋斗目标>基准目标时，就越大越好，反之亦然）
我们现在输入一个指标值，自动计算这个指标是否达标，分为三档：“达奋斗目标”、“达基准目标但未达奋斗目标”，“未达基准目标”。
主要问题在这个计算函数上，我以下的代码已实现功能，但代码太冗长和不灵活。
有什么更好的写法？请各位大佬指教，感谢。
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<head>
<!-- style -->
<link rel="stylesheet" href="https://unpkg.com/element-plus@2.2.17/dist/index.css" />
<!-- Vue 3 -->
<script src="https://unpkg.com/vue@3.2.40/dist/vue.global.js"></script>
<!-- component library -->
<script src="https://unpkg.com/element-plus@2.2.17/dist/index.full.js"></script>
</head>
</head>
<body>
<div id="app">
<el-form-item label="基准目标">
<el-input-number v-model="basic" :min="1" :max="100" @change="setChange" />
</el-form-item>
<el-form-item label="奋斗目标">
<el-input-number v-model="challenge" :min="1" :max="100" @change="setChange" />
</el-form-item>
<div>方向：{{isBiggerBetter?'越大越好':'越小越好'}}</div>
<br />
<br />
<br />
<el-form-item label="指标值">
<el-input-number v-model="thisValue" :min="1" :max="100" @change="thisValueChange" />
</el-form-item>
<div>结果：{{res}}</div>
</div>
<script>
let that = null,
App = {
data() {
return {
basic: 80,
challenge: 90,
isBiggerBetter: true,
thisValue: 85,
res: ''
}
},
mounted() {
that = this;
},
methods: {
thisValueChange() {
let { basic, challenge, isBiggerBetter, thisValue } = that,
res = '';
// 如果值已填写
if (thisValue && basic && challenge) {
// 越大越好
if (isBiggerBetter) {
if (thisValue >= challenge) {
res = '达奋斗目标'
} else if (thisValue < basic) {
res = '未达基准目标'
} else {
res = '达基准目标但未达奋斗目标'
}
// 越小越好
} else {
if (thisValue <= challenge) {
res = '达奋斗目标'
} else if (thisValue > basic) {
res = '未达基准目标'
} else {
res = '达基准目标但未达奋斗目标'
}
}
// 保存
that.res = res;
}
},
setChange() {
// 根据输入的基准目标和奋斗目标，判断是越大越好，还是越小越好
that.isBiggerBetter = that.basic < that.challenge
}
}
}
const app = Vue.createApp(App);
app.use(ElementPlus);
app.mount("#app");
</script>
</body>
</html> | 
发表于 2022-10-18 14:54
|
发表于 2022-10-18 15:19
