Knockout v3.4.0 中文版教程-13-控制文本内容和外观-css绑定

布满荆棘的人生 2023-06-02 14:56 2阅读 0赞

### 4. **css**绑定 ###

**目的**  
`css`绑定可以给关联的DOM元素添加或移除一个或多个CSS类。该绑定很有用，比如，当一些值为负数时高亮这些值为红色。

（注意：如果你不想使用一个CSS类选择器来附加样式而想直接给`style`属性赋值，请看style绑定。）

**静态类样式例子**

<div data-bind="css: { profitWarning: currentProfit() < 0 }"> Profit Information </div> <script type="text/javascript"> var viewModel = { currentProfit: ko.observable(150000) // Positive value, so initially we don't apply the "profitWarning" class }; viewModel.currentProfit(-50); // Causes the "profitWarning" class to be applied </script>

当`currentProfit`的值小于0的时候，会应用样式`profitWarning`，当值大于0的时候，会移除该类选择器样式。

**动态类样式例子**

<div data-bind="css: profitStatus"> Profit Information </div> <script type="text/javascript"> var viewModel = { currentProfit: ko.observable(150000) }; // Evalutes to a positive value, so initially we apply the "profitPositive" class viewModel.profitStatus = ko.pureComputed(function() { return this.currentProfit() < 0 ? "profitWarning" : "profitPositive"; }, viewModel); // Causes the "profitPositive" class to be removed and "profitWarning" class to be added viewModel.currentProfit(-50); </script>

当`currentProfit` 的值为正数时，会应用`profitPositive` 样式，否则会应用`profitWarning`样式。  
**参数**

*  主参数  
    如果你想使用静态类名，你可以传入一个javascript对象，其属性是你的CSS类名，它们的值会计算为`true`或`false`来决定类选择器样式是否应用。
    
    你可以一次设置多个CSS类样式，比如，你的视图模型有一个叫`isSevere`的属性。

你甚至可以基于一些条件来设置多个CSS样式，只要样式名被引号包裹起来。

非布尔值会被试图转换为布尔值。比如，`0`和`null`会被看做`false`，而`21`和非空对象会被看做`true`。

如果你的参数引用了一个监控值，当监控值发生改变时，CSS类会根据条件添加或移除。如果参数没有引用监控值，它只会在第一次添加或移除样式，之后不会这样做。

如果你想使用动态CSS类名，你可以传入一个字符串，字符串包含你想要加到元素上的类名。如果参数引用了一个监控值，绑定会移除旧值，然后添加对应的类名作为监控对象的新值。

通常情况下，你可以任意javascript表达式或函数作为参数值。KO会计算它们然后用结果值来决定CSS样式的增删。

*  额外参数  
    无

**注意：应用不合法的javascript变量名的css样式类名**  
如果你想应用样式`my-class`，你不能这样写：

因为`my-class`不是一个合法的变量标识符。解决办法很简单，只要用引号把标识名包括起来，这样变成了一个字面量，javascript对象字面量是合法的。比如：

**依赖**  
只有核心KO库

转载于:https://www.cnblogs.com/DHclly/p/6755417.html