riot.js apprentissage [4] Attributs booléens d'expression

Expression

Dans riot.js, les balises html peuvent utiliser des expressions plus puissantes pour définir des valeurs.
Les expressions peuvent être utilisées dans innerText, les attributs et sont une syntaxe JavaScript 100 % originale.

Donnez-moi quelques petits exemples :

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

Les méthodes d'utilisation sont également assez riches :

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

Les expressions de riot.js peuvent rendre votre html le plus possible possible Soigné et efficace.

Bien sûr, si votre expression est trop complexe, vous pouvez envisager de placer le calcul dans l'événement de mise à jour, ou d'utiliser une méthode de calcul distincte.

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

Le résultat est le suivant :

Attributs booléens

Les attributs tels que vérifié, sélectionné, etc., sont utilisés dans roit.js Appelé une propriété booléenne.

Si la valeur d'expression de l'attribut booléen est fausse, l'attribut sera ignoré :

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

sera généré :

<input name="false" ><input >

Comme indiqué dans le W3C spécification , tant que l'attribut booléen existe, il doit être vrai, même si sa valeur est fausse, il est toujours vrai.
Pour faire simple, même si l'on définit vérifié=false, l'effet final affiché par le navigateur est toujours vérifié.

Compte tenu de cela, roit.js a optimisé l'attribut booléen lors de sa génération. S'il s'agit d'un attribut booléen et que son expression satisfait aux conditions :

{ value == false }

will Cette propriété booléenne est non généré.

Les débutants rencontrent des pièges

Paramètres de propriété

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

Ces paramètres sont interdits, et le code généré sera comme ceci :

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

Il ça veut dire que je ne comprends pas du tout. Y a-t-il quelque chose qui ne va pas ?

Guillemets doubles

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

Cela semble normal, y a-t-il quelque chose qui ne va pas ?

Mais le code résultat est :

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

Encore une fois, riot.js en veut aux guillemets doubles ! ! ! ! [Dans la plupart des cas]

Ce qui précède est le contenu de l'apprentissage de riot.js [4] Attributs booléens d'expression Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois. (www.php.cn) !