Riotjs-conditional
提供:Dev Guides
RIOT.JS-条件付き
条件は、RIOTタグの要素を表示/非表示するために使用される構造です。 以下は、RIOTがサポートする3つの条件です-
- if -渡された値に基づいて要素を追加/削除します。
<custom2Tag>
<h2 if = {showMessage}>Using if!</h2>
<script>
this.showMessage = true;
</script>
</custom2Tag>
- show -trueが渡された場合、style = " _display: _ "を使用して要素を表示します。
<custom2Tag>
<h2 show = {showMessage}>Using show!</h2>
<script>
this.showMessage = true;
</script>
</custom2Tag>
- hide -trueが渡された場合、style = " _display: 'none' _ "を使用して要素を非表示にします。
<custom2Tag>
<h2 show = {showMessage}>Using show!</h2>
<script>
this.showMessage = true;
</script>
</custom2Tag>
例
以下は完全な例です。
custom2Tag.tag
<custom2Tag>
<h2 if = {showMessage}>Using if!</h2>
<h2 if = {show}>Welcome!</h1>
<h2 show = {showMessage}>Using show!</h2>
<h2 hide = {show}>Using hide!</h2>
<script>
this.showMessage = true;
this.show = false;
</script>
</custom2Tag>
カスタム2
<!DOCTYPE html>
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
</head>
<body>
<custom2Tag></custom2Tag>
<script src = "custom2Tag.tag" type = "riot/tag"></script>
<script>
riot.mount("custom2Tag");
</script>
</body>
</html>
これにより、次の結果が生成されます–