riot.js lernt [4] Ausdruck + boolesches Attribut

Ausdruck

In riot.js können HTML-Tags leistungsfähigere Ausdrücke zum Festlegen von Werten verwenden.
Ausdrücke können in innerText und Attributen verwendet werden und entsprechen zu 100 % der ursprünglichen JavaScript-Syntax.

Geben Sie mir einige kleine Beispiele:

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

Die Verwendungsmethoden sind auch recht umfangreich:

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

Ausdrücke von riot.js können Ihr HTML so gut wie möglich gestalten möglich Ordentlich und effizient.

Wenn Ihr Ausdruck zu komplex ist, können Sie natürlich erwägen, die Berechnung im Aktualisierungsereignis zu platzieren oder eine separate Berechnungsmethode zu verwenden.

 <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>

Die Ausgabe lautet wie folgt:

Boolesche Attribute

Attribute wie „geprüft“, „ausgewählt“ usw. werden in verwendet roit.js Wird als boolesche Eigenschaft bezeichnet.

Wenn der Ausdruckswert des booleschen Attributs falsch ist, wird das Attribut ignoriert:

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

wird generiert:

<input name="false" ><input >

Wie im W3C angegeben Spezifikation: Solange das boolesche Attribut existiert, muss es wahr sein, auch wenn sein Wert sogar falsch ist, ist es immer noch wahr.
Um es einfach auszudrücken: Auch wenn wir „checked=false“ setzen, wird der vom Browser angezeigte Endeffekt immer noch überprüft.

Vor diesem Hintergrund hat roit.js das boolesche Attribut beim Generieren optimiert. Wenn es sich um ein boolesches Attribut handelt und sein Ausdruck die Bedingungen erfüllt:

{ value == false }

wird Diese boolesche Eigenschaft ist nicht generiert.

Neulinge stoßen auf Fallstricke

Eigenschaftseinstellungen

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

Solche Einstellungen sind verboten und der generierte Code sieht folgendermaßen aus:

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

Es Das heißt, ich verstehe es überhaupt nicht. Stimmt etwas nicht?

Doppelte Anführungszeichen

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

Sieht normal aus, stimmt etwas nicht?

Aber der Ergebniscode lautet:

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

Wieder einmal hat riot.js einen Groll gegen doppelte Anführungszeichen! ! ! ! [In den meisten Fällen]

Das Obige ist der Inhalt des riot.js-Lernens [4] Ausdruck + Boolean-Attribut Für weitere verwandte Inhalte achten Sie bitte auf PHP-Chinesisch Website (m.sbmmt.com)!