Javascript 根据Vue中的数据更改表格单元格的背景

我目前正在尝试在vue项目中更改表中某些单元格的颜色。我在文档和一些其他在线资源上读到了关于类和样式绑定的内容，但我无法得到我想要的工作

我有一个表格，里面充满了来自firestore的数据，根据这些数据我想改变一些单元格的颜色。第一个单元格是显示人员“等级”的单元格，如果人员的等级为“金星”，“银星”，“青铜星”，“青铜星”则为

.goldstar

类

第二个单元格将显示人员的总分，该单元格将基于人员等级及其总分的一系列条件，例如，如果人员等级为“青铜星”，并且该人员有

>50分，我想把class
。change rank
添加到总单元格中，这样我就知道该更改了。我不知道我说得是否清楚

以下是我的表组件的代码（我对其进行了一点修剪以使其更易于阅读）


玩家补充道！
接近
成员名单
名称
等级
全部的
{{member.name}
{{member.rank}
{{member.total}
进口{
db，
fv，
tstp
}来自“./data/firebaseInit”；
从“firebase/app”导入firebase；
从“./组件/弹出窗口”导入弹出窗口；
导出默认值{
组成部分：{
弹出窗口
},
数据（）{
返回{
伊萨明：错，
伊斯梅尔：错，
snackbar:false，
成员：[]
};
},
创建（）{
this.fetchDb（）；
},
方法：{
fetchDb（）{
db.集合（“成员”）
.orderBy（“名称”）
.onSnapshot（快照=>{
常量成员=[]；
snap.forEach（doc=>{
让newPlayer=doc.data（）；
newPlayer.id=doc.id；
成员。推（新玩家）；
});
这个.成员=成员；
});
}
}
};
h3{
文字装饰：下划线；
颜色：#37474f；
}
.金星{
背景色：#ffee58；
}
.银星{
背景色：#bdbd；
}
.青铜星{
背景色：#cd7f32；
}
1.更改职级{
背景色：#00C853；
}
您只需有条件地为循环中的每个元素分配一个类：

<tr 
  v-for="(member, index) in members" 
  :key="index" 
  :class="{
    'gold-star': member.rank === 'Gold star',
    'silver-star': member.rank === 'Silver star',
    'bronze-star': member.rank === 'Bronze star',
  }"
>
...

您可以根据输入应用类。只需创建一个包含类和值的对象，如下所示

const类={
“金星”：“金星”，
‘银星’：‘银星’，
“青铜星”：“青铜星”
};

当你做循环时，只需在上面的对象中传递你的秩值，它就会根据秩返回类名。如下

{{item.rank}

您可以在这里查看工作演示

代码片段


名称
等级
全部的
{{member.name}
{{item.rank}
{{member.total}
我让列组正常工作，并开始执行更改列组部分，但由于存在多个条件，是否有更干净的方法来执行此操作，还是应该将其全部添加到表标记上？我刚刚意识到，这是基于等级和总分的，所以如果一个人是青铜星并且>50，它应该添加。更改等级，直到我将等级更改为银星。我试着添加一个&&它给我一个error@nicholasfc如果您有很多条件，并且希望使HTML更干净，那么可以将此任务卸载到一个方法
getTableClasses（member）{return…}
中，该方法
return
是一个格式化字符串，包含基于条件的所有类。代码量相同，但HTML看起来更干净：
：class=“getTableClasses（member）”
。或者只使用其他答案中发布的解决方案
<tr 
  v-for="(member, index) in members" 
  :key="index" 
  :class="getTableClasses(member)"
>

...

methods: {
  getTableClasses(member) { 
   let color = member.rank.toLowerCase().replace(' ', '-')
   let changeRank = member.total > 50 ? 'change-rank' : ''
   return `${color} ${changeRank}`
  }
}