riot.js学习【四】表达式+Boolean属性-tutorial js-php.cn

riot.js学习【四】表达式+Boolean属性

黄舟

Lepaskan： 2017-01-16 16:08:42

asal

1344 orang telah melayarinya

表达式

在riot.js中，html标签，可使用比较强大的表达式，来设值。
表达式可用在 innerText, attributes 中，而且100%原汁原味的JavaScript语法。

给几个小examples:

<h3 id={ /* 属性表达式 */ }>
    { /*这里可以写表达式*/ }</h3>

Salin selepas log masuk

使用方式也是蛮丰富的：

{ title || &#39;da宗熊&#39; }
{ isReady ? &#39;ready&#39; : &#39;loading&#39; }
{ new Date() }
{ this.getName() }
{ Math.round(10) }
{ message.length > 100 && &#39;消息太长了~&#39; }

Salin selepas log masuk

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>

Salin selepas log masuk

输出如下：

Boolean 属性

像checked, selected等属性，在roit.js中，就被称为Boolean属性。

如果Boolean属性的表达式值为false，那该属性将会被忽略：

<!-- 普通属性 -->
<input name={ false } >
<!-- Boolean属性 -->
<input checked={ null } >

Salin selepas log masuk

将会生成:

<input name="false" ><input >

Salin selepas log masuk

W3C规范中说明，只要Boolean属性存在，那它就肯定是true，甚至将它的值甚至为false，但它仍然为true。
简单来说，就是就算我们设置了 checked=false，但最终浏览器出来的效果，还是被勾选状态。

针对这一点，roit.js对Boolean属性，在生成时，进行了优化，如果是Boolean属性，而且它的表达式的满足条件:

{ value == false }

Salin selepas log masuk

都将不会生成该Boolean属性。

新手遇坑

属性设置

<input value={ name } { isCheck ? &#39;checked&#39; : &#39;&#39; } />

Salin selepas log masuk

这样的设置是禁止的，生成的，将会是这样的代码:

<input {="" true="" ?="" &#39;checked&#39;="" :="" &#39;&#39;="" }="">

Salin selepas log masuk

表示完全看不懂，有木有？

双引号

<input name={ "da宗熊" } >

Salin selepas log masuk

看着很正常啊，有木有？

但结果代码却是：

<input da宗熊"="" }"="" name="{ ">

Salin selepas log masuk

再次强调，riot.js就跟双引号有仇！！！！【大部分情况下】

以上就是riot.js学习【四】表达式+Boolean属性的内容，更多相关内容请关注PHP中文网（m.sbmmt.com）！