knockoutJS学习笔记05:控制文本和外观绑定
发布日期:2021-10-23 09:05:11 浏览次数:1 分类:技术文章

本文共 1094 字,大约阅读时间需要 3 分钟。

测试数据:

function Person(name,age){        var self = this;        self.name = ko.observable(name);        self.age = ko.observable(age);        self.isShow = ko.observable("");        self.html = "
没有div
", self.isRed = true } var person = new Person("tom",18); ko.applyBindings(person);

 一、text 绑定

  例如div、span 等标签的文本显示,text绑定是经过html编码的。

 二、visible 绑定

  如果变量或表达式为真,则正常显示;否则设置:display:none。  

显示或不显示
成年或未成年

   这里有一个小小的建议,js中,为假的情况有:布尔类型的:false、数字类型的:0 、字符类型的:"", 还有 null 和 undifined。有时候看到有些人这样写:if(str != null && str != ""){...},其实可以简写为:if(str){...}

三、html 绑定

  设置元素的innerHTML属性,不会对绑定内容进行html编码,所以可以引起html攻击。所以需要自己进行编码,或者改用text绑定。  

 四、attr绑定

  attr可以设置html元素的基本属性,例如img 的 src 属性,a 的href 属性等。attr 属性是一个对象,可以设置多个绑定属性。

 五、style 绑定

  style绑定用于设置dom元素的样式,根据变量或表达式的真/假,设置或移除样式。如果样式比较复杂的,建议用css绑定。

style绑定

 六、css 绑定

  css根据变量或表达式的真假,添加class属性到dom元素。  

css绑定

七、总结

  可以看到,ko除了可以用于数据绑定,还可以用于样式绑定。总之就是让我们尽量减少操作dom。上面还没有提到表单域的相关绑定,会在后面说明。

转载于:https://www.cnblogs.com/4littleProgrammer/p/4812840.html

转载地址:https://blog.csdn.net/weixin_30549657/article/details/95789766 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:Hibernate实现增删改查
下一篇:Linux 中各个文件夹的作用

发表评论

最新留言

留言是一种美德,欢迎回访!
[***.207.175.100]2024年03月05日 07时12分05秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

oracle自己运行,创建Oracle自动执行Job 2019-04-21
oracle报错00020,oracle启动 ORA-00020: maximum number of processes (%s) exceeded错误 2019-04-21
chmod 赋权所有_chmod 权限 命令详细用法 2019-04-21
html代码翻译_[译]您知道 HTML 的键盘标签吗? 2019-04-21
html抽奖代码_JavaScript高手之路:封装抽奖效果 2019-04-21
hadoop 3.3 一直停留在running wordcount_蛋价持续下跌,今日跌破3.3元大关!深秋季节价格还能反弹吗?... 2019-04-21
的流程图做完后如何保存_2019超火的半永久眉是哪款?做完后我们如何护理?... 2019-04-21
去除logo 高德地图api_深圳品牌logo升级如何保持原型的同时更具创新? 2019-04-21
二重积分转换成极坐标_二重积分转换极坐标r的范围如何确定? 2019-04-21
python中倒背如流_八字基础知识--倒背如流篇 2019-04-21
以太坊地址和公钥_以太坊地址是什么 2019-04-21
linux查看wifi信号命令_linux – 获取WIFI信号强度 – 寻求最佳方式(IOCTL,iwlist(iw)等)... 2019-04-21
npm 不重启 全局安装后_解决修复npm安装全局模块权限的问题 2019-04-21
vs格式化json 不生效_vs code 格式化 json 配置 2019-04-21
go 字符串反序列化成对象数组_Fastjson 1.2.24反序列化漏洞深度分析 2019-04-21
onmessage websocket 收不到信息_WebSocket断开重连解决方案,心跳重连实践 2019-04-21
hibernate mysql 缓存_hibernate和mysql的缓存问题,没辙了! 2019-04-21
abp框架 mysql_ABP框架使用Mysql数据库 2019-04-21
mysql树形递归删除_使用递归删除树形结构的所有子节点(java和mysql实现) 2019-04-21
linux mysql 不能连接远程_linux mysql 远程连接 2019-04-21