riot.js学習[4]式+ブール属性-jsチュートリアル-php.cn

riot.js学習[4]式+ブール属性

黄舟

リリース： 2017-01-16 16:08:42

オリジナル

1343 人が閲覧しました

式

riot.js では、HTML タグはより強力な式を使用して値を設定できます。
式は、innerText、属性、および 100% オリジナルの JavaScript 構文で使用できます。

いくつかの小さな例:

<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 を可能な限りクリーンかつ効率的にすることができます。

もちろん、式が複雑すぎる場合は、計算を更新イベントに配置するか、別の計算方法を使用することを検討できます。

 <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学習[4]式+ブール属性

ブール属性

checked、selectedなどの属性は、roit.jsではブール属性と呼ばれます。

ブール属性の式の値が false の場合、属性は無視されます:

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

ログイン後にコピー

が生成されます:

<input name="false" ><input >

ログイン後にコピー

W3C 仕様では、ブール属性が存在する限り、たとえブール属性が存在する場合でも true でなければならないと規定されています。 is 値は false ですが、それでも true です。
簡単に言うと、checked=falseと設定しても、ブラウザで表示される最終的な効果はチェックされたままになります。

これを考慮して、roit.js はブール属性を生成する際にブール属性を最適化し、その式が

{ value == false }

ログイン後にコピー

の条件を満たす場合、ブール属性は生成されません。

初心者は落とし穴に遭遇します

プロパティ設定

<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の学習[4]式+ブール属性の内容です。その他の関連コンテンツについては、PHP中国語Webサイト(m.sbmmt.com)に注目してください。