riot.js learning [4] Expression + Boolean attribute-JS Tutorial-php.cn

riot.js learning [4] Expression + Boolean attribute

黄舟

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

Original

1437 people have browsed it

Expression

In riot.js, html tags can use more powerful expressions to set values.
Expressions can be used in innerText, attributes, and are 100% original JavaScript syntax.

Give me a few small examples:

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

Copy after login

The usage methods are also quite rich:

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

Copy after login

riot.js expressions can make your html as clean and efficient as possible .

Of course, if your expression is too complex, you can consider placing the calculation in the update event, or using a separate calculation method.

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

Copy after login

The output is as follows:

riot.js learning [4] Expression + Boolean attribute

Boolean attributes

Attributes such as checked, selected, etc. are called in roit.js Boolean properties.

If the expression value of the Boolean attribute is false, the attribute will be ignored:

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

Copy after login

will be generated:

1	`<input name="false"` `><input >`

Copy after login

The W3C specification states that as long as the Boolean attribute exists, then it must be true, even if its value is even false, it is still true.
To put it simply, even if we set checked=false, the final effect shown by the browser is still checked.

In view of this, roit.js has optimized the Boolean attribute when generating it. If it is a Boolean attribute and its expression satisfies the conditions:

1	`{ value == false }`

Copy after login

will not Generate this Boolean property.

Beginner’s Encounter

Property Settings

1	`<input value={ name } { isCheck ? 'checked' : '' } />`

Copy after login

Such settings are prohibited, and the generated code will be like this:

1	`<input {=""` `true=""` `?=""` `'checked'=""` `:=""` `''=""` `}="">`

Copy after login

means complete I don't understand. Is there any problem?

Double quotes

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

Copy after login

Looks normal, is there anything wrong?

But the result code is:

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

Copy after login

Again, riot.js has a grudge against double quotes! ! ! ! [In most cases]

The above is the content of riot.js learning [4] Expression + Boolean attribute. For more related content, please pay attention to the PHP Chinese website (www. php.cn)!