RIOT.JS - 表示式

上一個
下一個

RIOT JS 使用 {} 來定義表示式。RIOT JS 允許使用以下型別的表示式。

  • 簡單表示式 − 定義變數並在標籤中使用。

<customTag>
   <h1>{title}</h1>
   <script>
      this.title = "Welcome to TutorialsPoint.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 TutorialsPoint.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>

這將產生以下結果 −

列印頁面
上一個
下一個
廣告