vue封装评分器：

<script setup>
import { ref } from 'vue';

const rateVal=ref(0)


//1-5分评价词语：
const words=['','垃圾！', '较差', '一般', '还行', '牛逼！']
//点击星星 修改评分
const ChooseRatr=(item)=>{
   
    if(rateVal.value===item){
        rateVal.value=0
    }else{
        rateVal.value=item
    }
   
}
</script>

<template>
  <div class="Ra">
    <span class="star">
      <i v-for="item in 5" :key="item" class="fa fa-star " @click="ChooseRatr(item)" :class="[item<= rateVal?'fa-star':'fa-star-o']"> </i>
    </span>
    <span class="text">{{ words[rateVal] }}</span>
  </div>
</template>

<style scoped lang="scss">
.Ra{
    .star{
        .fa-star{
            margin: 4px;
            color: rgb(241, 222, 12);
           
        }
        .fa-star-o{
            margin: 4px;
            color: rgb(184, 175, 175);
        }
    }
    .text{
        margin-left: 20px;
    } 
}
</style>