目的

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绑定的更多相关文章

  1. 关于vue.js中class与style绑定的学习

    练习代码: html: <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  2. Vue#Class 与 Style 绑定

    绑定HTMLCLASS 在我没看这之前,我觉得要写绑定class ,应该像绑定数据一样这么写 class ={{class-a}} 看官方教程时,不推荐这么写,推荐这样 v-bind:class=&q ...

  3. Vue中class与style绑定

    gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson07 一 用对象的方法绑定class 很简单,举个栗子: <!D ...

  4. Vue.2.0.5-Class 与 Style 绑定

    Class 与 Style 绑定 数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是属性 ,我们可以用v-bind 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼 ...

  5. Knockout.Js官网学习(style绑定、attr绑定)

    Style绑定 style绑定是添加或删除一个或多个DOM元素上的style值.比如当数字变成负数时高亮显示,或者根据数字显示对应宽度的Bar.(注:如果你不是应用style值而是应用CSS clas ...

  6. Class 与 Style 绑定

    将 v-bind 用于 class 和 style 时,Vue.js 做了专门的增强.表达式结果的类型除了字符串之外,还可以是对象或数组. 绑定 HTML Class 对象语法 <div cla ...

  7. 前端MVC Vue2学习总结(三)——模板语法、过滤器、计算属性、观察者、Class 与 Style 绑定

    Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...

  8. 【Vue.js】vue基础: 3种Class和Style绑定语法

    凡是用到了v-bind,那就一定有变量的存在,下面是三种语法的展示: 1. 对象语法: v-bind:class="{active: isActive, 'text-danger': has ...

  9. Vue学习4:class与style绑定

    说明:有些部分我只是相当于做一个学习笔记,加强记忆之用.所以可能阅读性不是那么强.如果有参考我这类博客的人,那么请见谅. 代码如下: <!DOCTYPE html> <html la ...

随机推荐

  1. 创建naarray(1)

    创建ndarray Numpy创建ndarray的方法比较够用,几乎也就是矩阵运算的常用的方法. 约定: import numpy as np 常用的创建ndarray的函数有:np.array, n ...

  2. jquery animate stop函数解析

    今天我们来看看jquery中动画操作的stop函数.其实我至今不是很明白啊,所以此文算是求救以及抛砖引玉. 在jquery 1.7版本以前,stop支持两个参数,分别是clearQueue和jumpT ...

  3. Javascript:再论Javascript的单线程机制 之 DOM渲染时机

    Javascript:再论Javascript的单线程机制 之 DOM渲染时机 背景 Javascript是单线程事件驱动的,所有能看到的Javascript代码都是在一个线程执行,定时器回调和AJA ...

  4. Windbg是windows平台上强大的调试器

    基础调试命令 - .dump/.dumpcap/.writemem/!runaway Windbg是windows平台上强大的调试器,它相对于其他常见的IDE集成的调试器有几个重要的优势, Windb ...

  5. 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 ...

  6. linux iptable 设置实践

    下面是设置网络时的基本状况: 主机3个网卡: eth0 192.168.0.1/24   内网 eth1 192.168.20.1/24  外网 eth2 192.168.50.1/24  会议室网络 ...

  7. 从一般分布式设计看HDFS设计思想与架构

     要想深入学习HDFS就要先了解其设计思想和架构,这样才能继续深入使用HDFS或者深入研究源代码.懂得了"所以然"才能在实际使用中灵活运用.快速解决遇到的问题.下面这篇博文我们就先 ...

  8. Android本地化资源目录详解

    我们可以设想,有两个不同分辨率的手机(320*480和480*800)要使用一些图像资源,为了使图像不失真,就需要为不同分辨率的手机指定不同的图像,为此就需要建立不同的资源目录. 在res目录中建立了 ...

  9. Python中BeautifulSoup中对HTML标签的提取

    一开始使用了beautifulSoup的get_text()进行字符串的提取,后来一直提取失败,并提示错误为TypeError: 'NoneType' object is not callable 返 ...

  10. ubuntu下vsftpd配置

    网上的文章好难懂啊..只想要简单粗暴,弄好能用就行啊,复杂的以后研究不行吗...折腾好久,其实弄出来能用不就这么点内容吗... 本文在Ubuntu Server 14.04 amd64系统测试. 安装 ...