javascript - 如何在vue.js中使用for循环显示x元素

Question

我在我的 asp.net 页面中有这个 for 循环，然后在同一个站点中我必须执行相同的操作，但是在 vue.js 中，我不熟悉 vue 我已经检查了 v-for 但我可以无法获得相同的结果，有人可以告诉我正确的方法吗？

这是我在 asp.net 中的 for 循环，我只需要在 vue.js 中翻译它:

<div>
@for (i = 1; i <= 5; i++)
{
if (i <= (rating))
{
    <i class="icon-ned icon-ned-star red"></i>
}
else
{
    <i class="icon-ned icon-ned-star gray"></i>
}
}
</div>

有什么想法吗？

Answer 1

你检查过vue文档吗，写得很好。

https://v2.vuejs.org/v2/guide/list.html#v-for-with-a-Range

<div>
  <i 
   v-for="n in 5"
   class="icon-ned icon-ned-start"
   :class="{
     'red': n <= rating,
     'gray': n > rating
   }"
  ></i>
</div>

或:class="n <= rating ? 'red' : 'gray'"对于带有切换功能的类列表