How to assign different classes to elements of the same type, depending on the number?

Question

Vue.js

I have a component that stores data, which in turn stores post objects. Posts have a number of stars (key: value). I need to make it so that depending on the value, the number of stars is displayed.
Let's say 4 stars, then it is displayed (fas classes are shaded, and far are not shaded):

<i class="fas fa-star"/>
<i class="fas fa-star"/>
<i class="fas fa-star"/>
<i class="fas fa-star"/>
<i class="far fa-star"/>

Answer 1

<i v-for="i in 5" :class="[ i <= stars ? 'fas' : 'far', 'fa-star' ]" />