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 ...
随机推荐
- 创建naarray(1)
创建ndarray Numpy创建ndarray的方法比较够用,几乎也就是矩阵运算的常用的方法. 约定: import numpy as np 常用的创建ndarray的函数有:np.array, n ...
- jquery animate stop函数解析
今天我们来看看jquery中动画操作的stop函数.其实我至今不是很明白啊,所以此文算是求救以及抛砖引玉. 在jquery 1.7版本以前,stop支持两个参数,分别是clearQueue和jumpT ...
- Javascript:再论Javascript的单线程机制 之 DOM渲染时机
Javascript:再论Javascript的单线程机制 之 DOM渲染时机 背景 Javascript是单线程事件驱动的,所有能看到的Javascript代码都是在一个线程执行,定时器回调和AJA ...
- Windbg是windows平台上强大的调试器
基础调试命令 - .dump/.dumpcap/.writemem/!runaway Windbg是windows平台上强大的调试器,它相对于其他常见的IDE集成的调试器有几个重要的优势, Windb ...
- MBR . Have it removed!
To know what it is, https://wiki.archlinux.org/index.php/Master_Boot_Record For a SD card, dd if=/de ...
- linux iptable 设置实践
下面是设置网络时的基本状况: 主机3个网卡: eth0 192.168.0.1/24 内网 eth1 192.168.20.1/24 外网 eth2 192.168.50.1/24 会议室网络 ...
- 从一般分布式设计看HDFS设计思想与架构
要想深入学习HDFS就要先了解其设计思想和架构,这样才能继续深入使用HDFS或者深入研究源代码.懂得了"所以然"才能在实际使用中灵活运用.快速解决遇到的问题.下面这篇博文我们就先 ...
- Android本地化资源目录详解
我们可以设想,有两个不同分辨率的手机(320*480和480*800)要使用一些图像资源,为了使图像不失真,就需要为不同分辨率的手机指定不同的图像,为此就需要建立不同的资源目录. 在res目录中建立了 ...
- Python中BeautifulSoup中对HTML标签的提取
一开始使用了beautifulSoup的get_text()进行字符串的提取,后来一直提取失败,并提示错误为TypeError: 'NoneType' object is not callable 返 ...
- ubuntu下vsftpd配置
网上的文章好难懂啊..只想要简单粗暴,弄好能用就行啊,复杂的以后研究不行吗...折腾好久,其实弄出来能用不就这么点内容吗... 本文在Ubuntu Server 14.04 amd64系统测试. 安装 ...