当前位置: 首页 > 工具软件 > Knockout.js > 使用案例 >

knockout.js css,knockout.js 的CSS

秦禄
2023-12-01

示例

此绑定会将提供的CSS类应用于该元素。当将给定条件宽松地评估为true时,将应用静态类。动态类使用可观察或计算的值。

page.html

Checks external expression

 10 }">Expression can be inline

Multiple classes

Dynamic CSS class from observable

Dynamic CSS class from computed

page.js

ko.applyBindings({

isInDanger: ko.observable(true),

dangerLevel: ko.observable(5),

isHot: ko.observable(true),

shouldGlow: ko.observable(true),

dynamicObservable: ko.observable('highlighted'),

dynamicComputed: ko.computed(function() {

var customClass = "";

if(dangerLevel() >= 15 ) {

customClass += " danger";

}

if(dangerLevel() >= 10) {

customClass += " glow";

}

if(dangerLevel() >= 5) {

customClass += " highlighted";

}

return customClass;

});

});

page.css

.danger { background: red; }

.glow { box-shadow: 5px 5px 5px gold; }

.highlighted { color: purple; }

另请参阅:官方文档。

 类似资料: