如何根据变量值更改 django html 中的状态栏颜色

Question

我正在制作一个django项目，该项目从API获取一些数据，然后将其呈现在表中。
我有这个html表格，其中一个单元格是

<td>{{status}}</td>

其中，状态是在远程服务器上运行的服务的状态。已启动或已停止。它包含在 html for 循环中，以便根据数据结果动态生成每一行。 目前，表格的设置方式只是简单地在表格中显示为纯文本"已启动"或"已停止"。 我想用进度条代替文本。类似的东西

<td><progress value="100" max="100" style="background-color:green; width:60px; height:20px" ></progress></td>

但是，如果状态为停止，我希望栏为红色，绿色为状态已启动。有什么办法可以做到这一点吗？我对python了解不错，但我真的没有任何前端经验。 任何帮助将不胜感激。

谢谢！

Answer 1

使用 django 的模板语言来做到这一点。下面是一个示例

<td><progress value="100" max="100" style="background-color:{% if status == 'started' %}green{% elif status == 'stopped' %}red{% endif %}; width:60px; height:20px" ></progress></td>

Answer 2

我建议你做两种不同的css风格。一个用于status-start，一个用于status-stop.假设它们看起来像这样：

.status-start{
background-color:green; 
width:60px; 
height:20px;
}
.status-stop{
color: red;
width:60px; 
height:20px;
}
<td><progress value="100" max="100" class={% if status == 'start' %}"status-start"{% else %}"status-stop"{%endif%} ></progress></td>