Knockout v3.4.0 中文版教程-14-控制文本内容和外观-style绑定
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
Knockout v3.4.0 中文版教程-14-控制文本内容和外观-style绑定相关推荐
- Knockout v3.4.0 中文版教程-6-计算监控-可写的计算监控
2.可写的计算监控 初学者可能想要跳过本节 - 可写的计算监控是相当高级的部分,在大多数情况下不是必需的. 通常,计算监控是一个通过其他监控值计算出的值,因此是只读的. 令人惊讶的是,可以使计算监控值 ...
- Knockout v3.4.0 中文版教程-9-计算监控-API参考
5.参考 下面的内容描述了如何构建和使用计算监控. 1. 构建一个计算监控 可以用如下的形式构建一个计算监控: ko.computed( evaluator [, targetObject, opti ...
- 最全MySQL8.0实战教程 14 MySQL的存储过程 14.2 入门案例
最全MySQL8.0实战教程 文章目录 最全MySQL8.0实战教程 14 MySQL的存储过程 14.2 入门案例 14.2.1 格式 14.2.2 操作 - 数据准备 14.2.3 操作 - 创建 ...
- 最全MySQL8.0实战教程 14 MySQL的存储过程 14.1 概述
最全MySQL8.0实战教程 文章目录 最全MySQL8.0实战教程 14 MySQL的存储过程 14.1 概述 14.1.1 什么是存储过程 14.1.2 特性 [黑马程序员MySQL知识精讲+my ...
- 《Adobe Flash CS4 ActionScript 3.0中文版经典教程》——ActionScript 3.0简介
本节书摘来自异步社区<Adobe Flash CS4 ActionScript 3.0中文版经典教程>一书中的ActionScript 3.0简介,作者: [美]Adobe公司 更多章节内 ...
- itools官方下载2015 v3.1.7.0 中文版
itools官方下载2015 v3.1.7.0 中文版 软件大小:16MB 软件语言:简体中文 软件类别:手机工具 软件授权:官方版 更新时间:2015-02-04 应用平台:/Win8/Win7/W ...
- 《Adobe Flash CS5 ActionScript 3.0中文版经典教程》——1.3 使用代码片断添加ActionScript...
本节书摘来自异步社区<Adobe Flash CS5 ActionScript 3.0中文版经典教程>一书中的第1章,第1.3节,作者: [美]Adobe公司 更多章节内容可以访问云栖社区 ...
- Lumion8.0中文版安装教程(附软件下载)
Lumion是一款可以实时的3D可视化工具,用来制作电影和静帧作品,涉及到的领域包含建筑.规划和设计: Lumion的强大在于它可以提供优秀的图像,并将快速和高效工作流程结合在一起,为使用者节省时间. ...
- MATLAB R2023 for Mac v9.14.0 安装教程 数学分析软件
MATLAB R2023 mac,是一款数学分析软件,无论是分析数据.开发算法还是创建模型,MATLAB 都是针对您的思维方式和工作内容而设计的.MATLAB是matrix&laborator ...
最新文章
- HDU-2444 The Accomodation of Students
- 高桥盾react和boost_boost与react的战斗
- Opencv模块功能介绍
- 第六天学习Java的笔记(循环语句)
- C#的winform的中委托显示图片
- 个人作业——福大微信公众号使用评测
- mysql查询出过去一个月_Mysql查询今天、昨天、7天、近30天、本月、上一月 数据...
- [vue] 你期待vue3.0有什么功能或者改进的地方?
- LeetCode 297. 二叉树的序列化与反序列化(前序遍历层序遍历)
- java 调试_我最喜欢的Java调试技术
- 嵌入式组态软件HMImaker(绿色版人机界面组态软件)
- Java智能教育平台源码基于 SpringBoot + Mybatis + Shiro + mysql + redis构建,前后端分离。
- 抖音微博火山快手皮皮虾微视去水印附源码
- 企业微信好友无上限,私域流量即将迎来春天?
- socket写超时c语言,设置socket超时时间
- 生产任务计划单,金蝶KIS旗舰版专业版K3WISE,生产管理软件ERP,金蝶生产任务管理,生产计划管理,自动下推生产领料单
- Java Web学习日记(一)
- 计算思维实践之路(一)
- Android事件总线(一)EventBus3.0用法全解析
- 计算机如何共享手机网络,怎么把电脑网络共享给手机
热门文章
- 操作系统实验_Chcore -- 上交IPADS操作系统银杏书配套Lab实验笔记 - Lab2内存管理(一)...
- 1从控制台输入年份,判断是闰年还是平年;
- springboot搞定全局自定义异常
- SpringBoot的注解@Qualifier用法
- JMeter中持续时间设置成永远调度器才会起作用
- 求数组第二大元素 和 字符串拷贝的实现
- IDEA/Eclipse安装 Alibaba Java Coding Guidelines 插件
- 疯狂的双十一也难挡股价的下跌,电商平台难道真的进入了瓶颈期?
- 《Puppet实战手册》——导读
- android 关联源码