표현식
riot.js에서 html 태그는 값을 설정하기 위해 더욱 강력한 표현식을 사용할 수 있습니다.
표현식은 innerText, 속성에 사용할 수 있으며 100% 원본 JavaScript 구문입니다.
몇 가지 작은 예를 들어보세요:
<h3 id={ /* 属性表达式 */ }> { /*这里可以写表达式*/ }</h3>
사용 방법도 매우 다양합니다.
{ title || 'da宗熊' } { isReady ? 'ready' : 'loading' } { new Date() } { this.getName() } { Math.round(10) } { message.length > 100 && '消息太长了~' }
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>
출력은 다음과 같습니다.
부울 속성
checked, selected 등과 같은 속성은 roit에서 호출됩니다. Node.js 부울 속성.
부울 속성의 표현식 값이 false인 경우 속성은 무시됩니다.
<!-- 普通属性 --> <input name={ false } > <!-- Boolean属性 --> <input checked={ null } >
가 생성됩니다.
<input name="false" ><input >
W3C 사양에서는 부울 속성이 존재하면 true여야 하며, 값이 false이더라도 여전히 true입니다.
간단히 말하면 selected=false로 설정하더라도 브라우저에 표시되는 최종 효과는 여전히 확인됩니다.
이를 고려하여 roit.js는 부울 속성을 생성할 때 해당 속성을 최적화했으며 해당 표현식이 조건을 만족하는 경우
{ value == false }
는 이 부울 속성을 생성하지 않습니다.
초보가 함정에 부딪히다
속성 설정
<input value={ name } { isCheck ? 'checked' : '' } />
이러한 설정은 금지됩니다. 생성된 코드는 다음과 같습니다.
<input {="" true="" ?="" 'checked'="" :="" ''="" }="">
는 완료를 의미합니다. 이해가 안 돼요. 문제가 있나요?
큰따옴표
<input name={ "da宗熊" } >
정상으로 보이는데 무슨 문제라도 있는 걸까요?
그러나 결과 코드는 다음과 같습니다.
<input da宗熊"="" }"="" name="{ ">
다시 한번 riot.js는 큰따옴표에 대한 불만을 가지고 있습니다! ! ! ! [대부분의 경우]
위는 riot.js 학습 내용입니다. [4] Expression + Boolean 속성 관련 내용은 PHP 중국어를 참고해주세요. 홈페이지(www.php.cn)!