评级-恒星组件vuejs2

Question

我有一个从1到5的整数，我应该能够在这个数字的基础上打印星号(使用FontAwersome)。我能做什么?

我必须使用VueJS 2

Answer 1

有一个简单的方法：

​

new Vue({
  el: '#demo',
  data() {
    return {
      stars: new Array(10)
          .fill('<i class="fa-solid fa-star"></i>', 0, 5)
          .fill('<i class="fa-regular fa-star"></i>', 5, 10),
      nr: 3
    }
  },
  methods: {
    rating() {
      return this.stars.slice(5 - this.nr, 10 - this.nr).join("")
    }
  }
})

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <div v-html="rating()"></div>
  <input type="number" v-model="nr" min="0" max="5" />
</div>

​

Answer 2

你可以这样做：

<div v-for="n in getStarRatingValue()">
    // full star
</div>
<div v-for="n in (5 - getStarRatingValue())">
    // empty star
</div>

其中，getStarRatingValue是一个将评分从0返回到5的函数。