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

【问题标题】：How to display x elements with for loop in vue.js如何在 vue.js 中使用 for 循环显示 x 元素
【发布时间】：2019-08-16 07:49:56
【问题描述】：

我在我的 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>

有什么想法吗？

【问题讨论】：

标签： javascript loops for-loop vue.js

【解决方案1】：

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

https://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'" 用于切换类列表

【讨论】：

OP还想在rating的基础上添加灰色和红色图标
用图标和颜色编辑答案
好的，我明白了，问题是它是 5 星评级，所以如果我有 4/5，最后一颗星应该是其他颜色
我的语法一定有问题，我在页面中得到这个评级 ? '灰色' : ''] > 你知道为什么吗？
这里不需要使用数组语法，使用前面提到的:class="n <= rating ? 'red' : 'gray'"。当然要确定是否为您定义了“评级”

【解决方案2】：

我刚刚遇到了这个问题并像您在下面看到的那样修复了它；

请注意，我为此目的使用了谷歌素材图标，并为样式使用顺风。但无论哪种方式，这仍然适用于纯 CSS，只需确保您正确声明了您所针对的类；

给你：

<span 
 v-for="n in 5"
 :key="n"
 :class=" 
   n <= rating 
     ? 'text-yellow-400 material-icons' 
     : 'text-gray-300 material-icons'
    ">
 star 
 </span>

【讨论】：