我正在开发一个 web 应用程序,它作为一个表格,其中有几列,其中包含一些数据。特别是我有一个名为 Change
的列,下面绑定(bind)了一些数据
<td data-bind="text: GradeName"></td>
<td data-bind="text:Price"></td>
<td data-bind="text:Change"></td>
Change
的值可以是负数或正数,但如果它是负数,我希望该值显示为红色或黑色。
我可以知道一个好的方法吗?
最佳答案
没有 CSS 选择器可以让您根据元素的内容来设置元素的样式,因此您无法仅在 CSS 中完成此操作。
但是,Knockout 可以在绑定(bind)数据时为您设置样式:您可以使用 css binding或 style binding .这是一个样式绑定(bind)示例:
<td data-bind="text: GradeName"></td>
<td data-bind="text: Price"></td>
<td data-bind="text: Change, style: { color: Change<0 ? 'red' : 'black' }"></td>
现场演示:
ko.applyBindings({ GradeName:"grade", Price:"€100.0", Change:-10, OtherField:10 });
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<table><tr>
<td data-bind="text:GradeName"></td>
<td data-bind="text:Price"></td>
<td data-bind="text:Change, style: { color: Change<0 ? 'red' : 'black' }"></td>
<td data-bind="text:OtherField, style: { color: OtherField<0 ? 'red' : 'green' }"></td>
</tr></table>
关于css - 根据该元素中的值将 css 分配给该元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30674478/