css: <binding-object>

优质

小牛编辑

146浏览

2023-12-01

此绑定允许您根据特定条件为HTML DOM元素定义CSS类。如果您需要根据情况突出显示某些数据，这非常有用。

语法 (Syntax)

css: <binding-object>

参数 (Parameters)

在静态CSS绑定的情况下，参数可以是JavaScript对象的形式，由属性及其值组成。
- 这里的Property是指要应用的CSS类， value可以是布尔值true或false，或JavaScript表达式或函数。
- 也可以使用Computed Observable函数动态应用Classes 。
也可以同时应用多个CSS类。以下是如何将2个类添加到绑定的示例。

<div data-bind = "css: { 
   outOfStock : productStock() === 0, 
   discountAvailable: discount 
}">

类名也可以用单引号指定，例如'discount Available'。
0和null被视为false值。数字和其他对象被视为真实值。
如果ViewModel属性是可观察的，则根据新更新的参数值确定CSS类。如果它不是可观察的值，那么第一次只确定一次类。

例子 (Example)

让我们看一下下面的例子，它演示了CSS绑定的使用。

<!DOCTYPE html>
   <head>
      <title>KnockoutJS CSS binding</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"
         type = "text/javascript"></script>
      <style>
         .outOfStock {
            color: red;
            font-weight: bold;
         }
      </style>
   </head>
   <body>
      <div data-bind = "css: { outOfStock : productStock() === 0 }">
         Product Details.
      </div>
      <script>
         function AppViewModel() {
            this.productStock = ko.observable(0);
         }
         var vm = new AppViewModel();
         ko.applyBindings(vm);
      </script>
   </body>
</html>

输出 (Output)

让我们执行以下步骤来查看上述代码的工作原理 -

将以上代码保存在css-bind.htm文件中。
在浏览器中打开此HTML文件。
当productStockproperty高于0时，产品信息以正常方式显示。产品信息变为红色和粗体。一旦productStock成为0。

css: &lt;binding-object&gt;

语法 (Syntax)

参数 (Parameters)

例子 (Example)

输出 (Output)

css: <binding-object>