用vue写一个评分功能 不做成组件

在Vue中编写一个简单的评分功能，通常我们会创建一个包含星形图标或者直接数字的模板，然后通过JavaScript事件处理改变星级。这里是一个基本示例：

HTML部分：

<div id="rating">
  <span v-for="(star, index) in 5" :key="index" @click="rate(index)">
    {{ star === currentRating[index] ? '★' : '☆' }}
  </span>
</div>

在这个例子中，我们有一个`<span>`元素遍历0到4，代表五颗星。每个`span`的点击事件绑定到`rate`方法，传入当前点击的是第几个星。

Vue实例中的脚本：

new Vue({
  el: '#rating',
  data: {
    currentRating: [0, 0, 0, 0, 0], // 初始评分为全零
  },
  methods: {
    rate(index) {
      if (this.currentRating[index] < 5) { // 只允许最多给5分
        this.currentRating[index]++;
      }
      console.log('用户给了第', index, '星评价');
    }
  }
})

每次用户点击星星时，对应的评分会增加，并在控制台打印出相关信息。