Vue.js 迭代类绑定到span

我有10颗黑星，想用一次迭代来画它们。我通过类绑定10个不同的跨距来绘制它们，但我只想要一个跨距（最多两个），而不是10个跨距

例如，如果我的“星”数据等于4，我需要4个已绘制的星和6个未绘制的星

你应该检查下面我的钢笔。谢谢

newvue({
el:“应用程序”，
数据：{
绘画：4，
未上漆：6
}
});
。已选中{
颜色：橙色；
}
以下是3种变体。所有人都在使用
v-for
，范围如下：

第一个假设总是有10颗星

第二个和第三个显示了两种不同的组合方式，分别是
已绘制的
和
未绘制的


newvue({
el:“应用程序”，
数据：{
绘画：4，
未上漆：16
}
});
。已选中{
颜色：橙色；
}
.行{
显示器：flex；
边缘底部：10px；
}

是的，但如果Unpaint给了我未上漆的，那就太棒了。@KaanGokdemir，我不明白。你是说不一定有10颗星吗？是的，但这10颗星来自绘画+未绘画。所以，如果“未上漆”变为8，则应该有12颗星，4颗星上漆，8颗星未上漆。@KaanGokdemir我相应地更新了我的答案。