首頁  >  文章  >  web前端  >  riot.js學習【四】表達式+Boolean屬性

riot.js學習【四】表達式+Boolean屬性

黄舟
黄舟原創
2017-01-16 16:08:421304瀏覽

表達式

在riot.js中,html標籤,可使用比較強大的表達式,來設值。 
表達式可用在 innerText, attributes 中,而且100%原汁原味的JavaScript語法。

給幾個小examples:

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

使用方式也是蠻豐富的:

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

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>

輸出如下:

riot.js學習【四】表達式+Boolean屬性

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 ? &#39;checked&#39; : &#39;&#39; } />

這樣的設定是禁止的,生成的,將會是這樣的代碼:

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

表示完全看不懂,有木有?

雙引號

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

看著很正常啊,有木有?

但結果代碼是:

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

再次強調,riot.js就跟雙引號有仇! ! ! ! 【大部分情況下】


以上就是riot.js學習【四】表達式+Boolean屬性的內容,更多相關內容請關注PHP中文網(www.php.cn)!


陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn