用vu3写一个简单的星星评分

好的，下面是一个用 Vue 3 写的简单的星星评分组件示例：

<template>
  <div>
    <div class="star-rating">
      <span v-for="(star, index) in stars" :key="index" @click="setRating(index + 1)">
        <i :class="star"></i>
      </span>
    </div>
    <p>您的评分为：{{ rating }}颗星</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rating: 0,
      stars: ['far fa-star', 'far fa-star', 'far fa-star', 'far fa-star', 'far fa-star']
    }
  },
  methods: {
    setRating(rating) {
      this.rating = rating;
      this.stars.fill('far fa-star', rating);
      this.stars.fill('fas fa-star', 0, rating);
    }
  }
}
</script>

<style>
.star-rating {
  font-size: 3rem;
  color: #ffd700;
}

.star-rating i {
  margin-right: 0.3rem;
  cursor: pointer;
}
</style>

这个组件定义了一个 `rating` 变量来保存当前用户的评分，以及一个 `stars` 数组来保存星星的样式类名。在模板中，使用 `v-for` 循环渲染五颗星星，通过点击事件来设置评分，并动态改变星星的样式。

在 `setRating` 方法中，我们使用 `fill` 方法来动态修改 `stars` 数组的内容，从而改变星星的样式。具体来说，我们将前 `rating` 个元素改为 `fas fa-star` 样式，后面的元素改为 `far fa-star` 样式。

这是一个非常简单的星星评分组件，您可以根据需求进行进一步的优化和扩展。