评分明星组件VUEJS2

Question

我有一个从一到五的积分数字，我应该能够根据该数字打印恒星数（使用Fontawersome）。 我能做些什么？

我必须使用vuejs 2

Answer 1

您可以做类似的事情：

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

where getStarratingValue是一个函数，将评级从0返回到5

Answer 2

一种简单的方法：

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>