如何使Javascript语法(condional with if else)更高效，使其更好、更容易理解(Vue.js

Question

有人能告诉我如何使这种语法更高效、更容易理解吗？我在Vue的方法部分这样做：

methods: {
getColorBtn(status, isCorrect, isRemind, textButton) {
if (status === 1 && isCorrect === 1 && isRemind === 1) return 'v-btn--outlined theme--light primary--text'
if (status === 1 && isCorrect === 0 && isRemind === 1) return 'primary plain--text'
if (status === 0 && isCorrect === 0 && isRemind === 1) {
return 'v-btn v-btn--text theme--light success--text shadow-none'
}
if (status === 0 && isCorrect === 0 && isRemind === 0) {
return 'v-btn v-btn--text theme--light primary--text shadow-none'
}
return 'primary'
},
textButton(status, isCorrect, isRemind, textButton) {
if (status === 1 && isCorrect === 1 && isRemind === 1) return 'Corrected'
if (status === 1 && isCorrect === 0 && isRemind === 1) return 'Correction'
if (status === 0 && isCorrect === 0 && isRemind === 1) return 'Reminded'
if (status === 0 && isCorrect === 0 && isRemind === 0) return 'Remind'
return 'primary'
},
getIcon(status, isCorrect, isRemind, textButton) {
if (status === 1 && isCorrect === 1 && isRemind === 1) return 'd-none'
if (status === 1 && isCorrect === 0 && isRemind === 1) return 'd-none'
if (status === 0 && isCorrect === 0 && isRemind === 1) return mdiBellCheckOutline
if (status === 0 && isCorrect === 0 && isRemind === 0) return mdiBellOutline
return ''
},
getColorChip(status) {
if (status === 1) return 'v-chip-light-bg success--text'
return 'v-chip-light-bg error--text'
},
}
the result
The data() (Btw, I just show it with 1 data as example here. Just to show the structure to y'all):
data() {
return {
isHide: true,
icons: {
mdiBellOutline,
mdiBellCheckOutline,
},
students: [
{
no: '1',
thumbnail,
name: 'Ridho Mckinnon',
status: 1,
time: ' 08:04 - 09:58, 19/01/2021',
isCorrect: 1,
isRemind: 1,
},
}
}

结果：点击这里

data(((顺便说一句，我只是用1个数据作为例子来展示它。它是一个伪数据(：

data() {
return {
isHide: true,
icons: {
mdiBellOutline,
mdiBellCheckOutline,
},
students: [
{
no: '1',
thumbnail,
name: 'Ridho Mckinnon',
status: 1,
time: ' 08:04 - 09:58, 19/01/2021',
isCorrect: 1,
isRemind: 1,
},
}
}

我真的是JS和Vue的新手。我希望你们都能帮助我如何编写比这些更好的代码。提前感谢

Answer 1

使用嵌套数组或对象。

const colorButtons = {
field: 'status',
1: {
field: 'isCorrect',
1: {
field: 'isRemind',
1: 'v-btn--outlined theme--light primary--text'
},
0: {
field: 'isRemind',
1: 'primary plain--text'
}
0: {
field: 'isCorrect',
0: {
field: 'isRemind',
1: 'v-btn v-btn--text theme--light success--text shadow-none',
0: 'v-btn v-btn--text theme--light primary--text shadow-none'
}
}
}
getColorBtn(status, isCorrect, isRemind, textButton) {
return colorButtons.?[status].?[iscorrect].?[isRemind] || 'primary';
}

对其他功能重复此操作。