riot.js学习【四】表达式+Boolean属性
来源:互联网 发布:淘宝怎么关联小号 编辑:程序博客网 时间:2024/05/23 11:08
表达式
在riot.js中,html标签,可使用比较强大的表达式,来设值。
表达式可用在 innerText, attributes 中,而且100%原汁原味的javascript语法。
给几个小examples:
<h3 id={ /* 属性表达式 */ }> { /*这里可以写表达式*/ }</h3>
使用方式也是蛮丰富的:
{ title || 'da宗熊' }{ isReady ? 'ready' : 'loading' }{ new Date() }{ this.getName() }{ Math.round(10) }{ message.length > 100 && '消息太长了~' }
riot.js的表达式,让你的html尽可能的整洁,高效。
当然如果你的表达式过于复杂,可以考虑把计算放在 update事件,或独立一个计算方法。
<todo> <!-- value的计算很复杂 --> <p>{ value }</p> <p>{ this.getText(this.text) }</p> // 计算复杂的表达式 this.on("update", function(){ var d = new Date(); this.value = d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate(); }); this.text = "da宗熊"; // getText方法,会依赖于this对象下 getText(text){ return "你好" + text; } </todo>
输出如下:
Boolean 属性
像checked, selected等属性,在roit.js中,就被称为Boolean属性。
如果Boolean属性的表达式值为false,那该属性将会被忽略:
<!-- 普通属性 --><input name={ false } ><!-- Boolean属性 --><input checked={ null } >
将会生成:
<input name="false" ><input >
W3C规范中说明,只要Boolean属性存在,那它就肯定是true,甚至将它的值甚至为false,但它仍然为true。
简单来说,就是就算我们设置了 checked=false,但最终浏览器出来的效果,还是被勾选状态。
针对这一点,roit.js对Boolean属性,在生成时,进行了优化,如果是Boolean属性,而且它的表达式的满足条件:
{ value == false }
都将不会生成该Boolean属性。
新手遇坑
属性设置
<input value={ name } { isCheck ? 'checked' : '' } />
这样的设置是禁止的,生成的,将会是这样的代码:
<input {="" true="" ?="" 'checked'="" :="" ''="" }="">
表示完全看不懂,有木有?
双引号
<input name={ "da宗熊" } >
看着很正常啊,有木有?
但结果代码却是:
<input da宗熊"="" }"="" name="{ ">
再次强调,riot.js就跟双引号有仇!!!!【大部分情况下】
0 0
- riot.js学习【四】表达式+Boolean属性
- riot.js学习【二】mixin
- riot.js学习【三】事件
- riot.js学习【八】观察者
- riot.js学习【九】路由
- riot.js 学习【一】自定义标签
- riot.js学习【五】杂烩1
- riot.js学习【六】杂烩2
- riot.js学习【七】脚本创建标签
- 初识riot.js
- Riot视频学习
- js学习四-RegExp正则表达式
- JavaScript基础学习(四)---Boolean(布尔)对象
- 正则表达式学习四
- javascript中的boolean表达式
- 布尔(Boolean)表达式
- js学习笔记:基本包装类型——Boolean
- javascript学习(十二)JS Number对象和Boolean对象
- 使用Java添加系统右键菜单---修改篇
- Android4.4——InputManagerService之InputReader线程
- Android调用系统相机和自定义相机实例
- c语言从文件中读入格式化数据并存入sqlite3
- IBM 笔记本错误对应码
- riot.js学习【四】表达式+Boolean属性
- 输入一串字符串,其中有普通的字符与括号组成(包括‘(’、‘)’、‘[’,']'),要求验证括号是否匹配,如果匹配则输出0、否则输出1.
- Canny边缘检测算法原理及其VC实现详解(三)
- list类集
- 获取主流浏览器滚动条的位置
- 浅谈大数据与智能电厂
- KVO
- 如何在十天内掌握线性代数?
- 黑马程序员----JAVA基础语法