我们可以遍历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>
预览效果:

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