RIOT.JS教程:表达式

RIOT js使用{}定义表达式。RIOT js允许以下类型的表达式。

  • 简单表达式-定义变量并在标签内使用。
<customTag>
   <h1>{title}</h1>
   <script>
      this.title = "Welcome to web176.COM";
   </script>
</customTag>
  • 评估表达式-在操作中使用时评估变量。
<customTag>
   <h2>{val * 5}</h2>
   <script>
      this.val = 4;
   </script>
</customTag>
  • 从Options对象获取值-获取通过属性传递给标签的值。

例子

以下是上述概念的完整示例。

customTag.tag

<customTag>
   <h1>{title}</h1>
   <h2>{val * 5}</h2>
   <h2>{opts.color}</h2>
   <script>
      this.title = "Welcome to web176.COM";
      this.val = 4;
   </script>
</customTag>

index.htm

<!DOCTYPE html>
<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <customTag color="red"></customTag>
      <script src = "customTag.tag" type = "riot/tag"></script>
      <script>
         riot.mount("customTag");
      </script>
   </body>
</html>

这将产生以下结果:

RIOT.JS教程:表达式

作者:terry,如若转载,请注明出处:https://www.web176.com/riotjs/2202.html

(0)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2021年3月31日 下午3:53
下一篇 2021年3月31日 下午4:00

相关推荐

发表回复

登录后才能评论