RIOT.JS教程:Loops循环

我们可以遍历RIOT的原语或对象数组,并随时随地创建/更新html元素。使用“每个”构造我们可以实现它。

  • 创建数组-创建对象数组。
this.cities = [
   { city : "Shanghai" , country:"China" , done: true },
   { city : "Seoul"    , country:"South Korea" },
   { city : "Moscow"   , country:"Russia"      }
];
  • 添加每个属性-现在使用“每个”属性。
<ul>
   <li each = { cities } ></li>
</ul> 
  • 迭代对象数组-使用对象属性迭代数组。
<input type = "checkbox" checked = { done }> { city } - { country }

例子

以下是完整的示例。

custom7Tag.tag

<custom7Tag>
   <style>
      ul {
         list-style-type: none;
      }
   </style>
   <ul>
      <li each = { cities } >
         <input type = "checkbox" checked = { done }> { city } - { country }
      </li>
   </ul>
   <script>
      this.cities = [
         { city : "Shanghai" , country:"China" , done: true },
         { city : "Seoul"    , country:"South Korea" },
         { city : "Moscow"   , country:"Russia"      }
      ]; 
   </script>
</custom7Tag>

custom7.htm

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

预览效果:

RIOT.JS教程:Loops循环

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

(1)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2021年3月31日 下午3:39
下一篇 2021年3月31日 下午3:45

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注