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.
参数
style的名字应该传递的是一个类似JavaScript对象的东西,而它的值就是这个样式的值。
也可以一次设置多个样式,例如,如果view model有一个isServer的属性:
<div data-bind="style: { color: currentProfit() < 0 ? 'red' : 'black', fontWeight: isSevere() ? 'bold' : '' }">...</div>
如果参数是一个observable的值,那么绑定会在值发生改变时动态的更新样式值。否则,就只会在初始化时绑定一次。
你可以使用任何的JavaScript表达式或者函数做为参数值,KO都会进行正确的显示。
注:当style的名称不是合法的JavaScript对象名称时
当样式的名称不是合法的JavaScript变量名,如font-weight或者text-decoration时,此时我们要使用这些样式的JavaScript名称,如:
font-weight,要写成: fontWeight
text-decoration,要写成:textDecoration
Style绑定的更多相关文章
- 关于vue.js中class与style绑定的学习
练习代码: html: <!DOCTYPE html><html lang="en"><head> <meta charset=" ...
- Vue#Class 与 Style 绑定
绑定HTMLCLASS 在我没看这之前,我觉得要写绑定class ,应该像绑定数据一样这么写 class ={{class-a}} 看官方教程时,不推荐这么写,推荐这样 v-bind:class=&q ...
- Vue中class与style绑定
gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson07 一 用对象的方法绑定class 很简单,举个栗子: <!D ...
- Vue.2.0.5-Class 与 Style 绑定
Class 与 Style 绑定 数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是属性 ,我们可以用v-bind 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼 ...
- Knockout.Js官网学习(style绑定、attr绑定)
Style绑定 style绑定是添加或删除一个或多个DOM元素上的style值.比如当数字变成负数时高亮显示,或者根据数字显示对应宽度的Bar.(注:如果你不是应用style值而是应用CSS clas ...
- Class 与 Style 绑定
将 v-bind 用于 class 和 style 时,Vue.js 做了专门的增强.表达式结果的类型除了字符串之外,还可以是对象或数组. 绑定 HTML Class 对象语法 <div cla ...
- 前端MVC Vue2学习总结(三)——模板语法、过滤器、计算属性、观察者、Class 与 Style 绑定
Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...
- 【Vue.js】vue基础: 3种Class和Style绑定语法
凡是用到了v-bind,那就一定有变量的存在,下面是三种语法的展示: 1. 对象语法: v-bind:class="{active: isActive, 'text-danger': has ...
- Vue学习4:class与style绑定
说明:有些部分我只是相当于做一个学习笔记,加强记忆之用.所以可能阅读性不是那么强.如果有参考我这类博客的人,那么请见谅. 代码如下: <!DOCTYPE html> <html la ...
随机推荐
- ThreadPool&ManualResetEvent
在多线程的程序中,经常会出现两种情况: 一种情况: 应用程序中,线程把大部分的时间花费在等待状态,等待某个事件发生,然后才能给予响应 这一般使用ThreadPool(线程池)来解决: 另一种情况:线程 ...
- VC 编程ANSI环境下读写Unicode文件
没有注意到文件编码的不同会产生这么多的问题,在动手以前查询了很多资料,在本博客中收藏了不少先辈的成果,在这里一并表示致敬! 关于ANSI和Unicode编码的原理在这里也不说了,主要讲下如 ...
- java ArrayList的序列化分析
一.绪论 所谓的JAVA序列化与反序列化,序列化就是将JAVA 对象以一种的形式保持,比如存放到硬盘,或是用于传输.反序列化是序列化的一个逆过程. JAVA规定被序列化的对象必须实现java.io.S ...
- 使用gulp构建自动化工作流
简单易用 高效构建 高质量的生态圈 可能很多人会说现在提gulp也太落后了吧,但我想说写点东西并不是为了讨论它是否过时,而是来帮助我们自己来记忆.整理和学习.任何工具,我需要,我才去使用它,正如此时我 ...
- CSS预处理器的对比 — Sass、Less和Stylus
本文根据Johnathan Croom的<sass vs. less vs. stylus: Preprocessor Shootout>所译,整个译文带有我们自己的理解与思想,如果译得不 ...
- Largest prime factor
problem 3:Largest prime factor 题意:求600851475143的最大的质因数 代码如下: #ifndef PRO3_H_INCLUDED #define PRO3_H_ ...
- D3.js:Update、Enter、Exit
Update.Enter.Exit 是 D3 中三个非常重要的概念,它处理的是当选择集和数据的数量关系不确定的情况. 如果数组为 [3, 6, 9, 12, 15],将此数组绑定到三个 p 元素的选择 ...
- java-并发解决方案
并发产生数据不一致的原因:1.程序共享对象:2.多线程.3.基于1和2,取出来的数据可能不是最新的. 解决方案:只要是原子性操作,就不会出现问题.原子性操作,代表cpu会一直执行这个操作,知道结束. ...
- python爆破zip脚本
最近在提高自己编程能力,拿一些实用的小工具练下.该脚本为python语言,主要涉及模块zipfile,threadings模块. 功能:暴力猜解zip解压密码 #coding: utf-8 impor ...
- jq屏蔽f5
//屏蔽F5 $(document).ready(function () { $(document).bind("keydown", function (e) { e = wind ...