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

缺乏、安全感 2023-06-02 14:56 15阅读 0赞

### 5. **style**绑定 ###

**目的**  
`style`绑定用来给关联的DOM元素添加或移除一个或多个样式值。在如下情况很有用，比如，当某些值为负时，高亮显示，或者设置容器元素的宽度来匹配数值的改变。  
（注意：如果你不想应用一个显示的样式值而想用分配一个CSS类样式，请参考`css`绑定。）

**例子**

<div data-bind="style: { color: currentProfit() < 0 ? 'red' : 'black' }">
       Profit Information
    </div>
     
    <script type="text/javascript">
        var viewModel = {
            currentProfit: ko.observable(150000) // Positive value, so initially black
        };
        viewModel.currentProfit(-50); // Causes the DIV's contents to go red
    </script>

当`currentProfit`小于0时，元素的`style.color`属性会赋值`red`,大于0会赋值`black`。  
**参数**

*  主参数  
    你应该传入一个javascript对象，其属性名对应样式名，值对应你想应用的样式值。  
    你可以一次设置多个样式。比如，你的视图模型有个属性叫做`isSevere`，
    
    ...

如果你的参数引用是一个监控值，当监控对象值改变时会自动更新对应绑定。如果参数引用的不是监控值，则只会更新一次。

通常，你可以使用任意的javascript表达式或函数作为参数值。KO会计算它们然后用它们的结果值来确定应该使用的样式值。

*  额外参数  
    无

**注意：应用的样式名不是合法的javascript变量名**  
如果你想应用一个`font-weight`或`text-decoration`样式，或者其他任意样式，而其名字不是符合javascript定义（因为包含了连字符），你应该使用样式的javascript名称，比如：

*  不要写`{ font-weight: someValue }`; 应该写 `{ fontWeight: someValue }`
 *  不要写 `{ text-decoration: someValue }`; 应该写 `{ textDecoration: someValue }`  
    **依赖**  
    除了核心KO库以外都不依赖

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